单击延迟是否有可能在新的单击时重新启动

Question

我有一个邮政编码列表，每个邮政编码旁边都有一个复选框。当用户选中或取消选中 ZIP 时，我正在重新绘制一张地图，上面绘制了 ZIP 多边形。我不想在每次单击 "polyZIP" 中的 class 时告诉地图重新绘制，而是想在单击后 1 秒绘制地图时进行延迟......但是有我不确定的部分。如果用户在列表中快速向下移动 checks/unchecks 个邮政编码，我希望每次单击都重新启动 1 秒计时器，以便只有在单击停止至少一秒钟后才会重新绘制地图。

我在 http://jsfiddle.net/a2f1ydyh/ 创建了一个（非常丑陋的）测试。您可以在 fiddle 上看到，如果您快速单击“开始”按钮，最终结果区域将对每次点击进行计数。我基本上希望任何点击都会重新启动计数器。

这是丑陋的代码：

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

单击延迟是否有可能在新的单击时重新启动

Is it possible for the click delay to restart on a new click

jquery

settimeout