2015-10-06 81 views
0

我有一个邮政编码列表,每个邮政编码旁边都有一个复选框。当用户选中或取消选中ZIP时,我正在重绘一张贴有ZIP多边形的地图。我不想每次点击一个“polyZIP”类都告诉地图重绘,我想拖延点击后1秒钟绘制地图...但是我不确定的部分是。如果用户按下列表并快速检查/取消选择邮政编码,我希望每次点击都重新启动1秒定时器,以便只有在点击停止至少一秒后才会重新绘制地图。是否有可能点击延迟重新启动一次新的点击

我在http://jsfiddle.net/a2f1ydyh/创建了一个(非常难看的)测试。您可以在小提琴上看到,如果您快速点击go按钮,最终结果区域会计算每次点击。我希望基本上任何点击都能重新启动计数器。

这里是丑陋的代码:

<script> 
    var counter = 0; 
    var timeout = ""; 
    $(function() { 
     $("#go").click(function() { 
      timeout = setTimeout(function() { actionFunction(); }, 3000); 
     }); 
    }); 

    function actionFunction() 
    { 
     counter++; 
     var results = $("#results").html() + "<br />" + counter; 
     $("#results").html(results); 
     clearTimeout(timeout); 
    } 
</script> 

<input id="go" type="button" value="CLICK ME" /><br /><br /> 

<div id="results"></div> 
+0

看起来像你只需要移动'clearTimeout(超时)'来点击功能本身的开始。 – Shikkediel

+0

我试着将它移动到timeout = setTimeout ...行之后,但它根本不起作用......然后我在“actionFunction();”之后移动它。并且它的功能与它在actionFunction函数中的一样 – Brds

+1

您是否尝试将它作为点击处理程序中的第一行代码?超时本身应该写得稍微短一些:'timeout = setTimeout(actionFunction,3000);'。 – Shikkediel

回答

0

清除超时设置在click功能的新的人之前。

var counter = 0; 
 
var timeout = ""; 
 
$(function() { 
 
    $("#go").click(function() { 
 
    clearTimeout(timeout); 
 
    timeout = setTimeout(function() { 
 
     actionFunction(); 
 
    }, 3000); 
 
    }); 
 
}); 
 

 
function actionFunction() { 
 
    counter++; 
 
    var results = $("#results").html() + "<br />" + counter; 
 
    $("#results").html(results); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="go" type="button" value="CLICK ME" /> 
 
<br /> 
 
<br /> 
 

 
<div id="results"></div>