Question

我有一个邮政编码列表，每个邮政编码旁边都有一个复选框。当用户选中或取消选中ZIP时，我会重新绘制将ZIP多边形绘制到其上的地图。而不是告诉地图每次重绘一个＆＃34; polyZIP＆＃34;点击后，我想在点击后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>

Answer 1

在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>

是否可以在新单击时重新启动点击延迟

1 个答案: