如何在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));
})