javascript - 如何在 jQuery 事件处理程序中存储和重用超时？

Question

我有一个按钮，点击它会启动一个超时功能，如果在该功能执行前再次点击它，我希望清除之前的超时，从而可以启动一个新的超时。

演示代码:

<div id='a'>lorem</div>

$('#a').click(function(){
  //code to clear previous timeout
  //This is not working: clearTimeout(timeout);
  var timeout = setTimeout(function(){
   //do something
  },5000);
  return timeout;    
})

我能想到的唯一方法是将 timeout 设为全局，但全局很丑。

有没有更好的方法来做到这一点？在上面的代码中，timeout 被返回到哪里？我可以在哪个范围内使用它？

Answer 1

您可以在此处使用两种替代全局变量的方法:

1 一个 IIFE创建本地范围:

(function(){
    var timer;
    $('#a').click(function(){
      clearTimeout(timer);
      timer = setTimeout(function(){
          //do something
      },5000);
    })
})();

2 附加到元素的 jquery 数据

$('#a').click(function(){
  clearTimeout($(this).data('timer'));
  $(this).data('timer', setTimeout(function(){
      //do something
  },5000));
})