Question

实际上我找不到这个问题的确切标题。但我可以形容它，以便你知道我需要什么。说我有一个＃pressme按钮，我想绑定一个click事件处理程序。在函数处理程序中，我将使用ajax从服务器获取一些数据，然后解析数据以更新div＃status的文本，例如：从N / A到更新/未更新。因为数据总是在变化，所以我想添加另一个函数来将div＃状态改回N / A. 以下是我提出的这个目的：

 $("button#pressme").bind("click", function(){
           $.ajax{(
                   type:"POST",
                   .....
                   success: function (xml, status) {
                     .....
                     $("div#status").text("updated");
                     setTimeout(function(){$("div#status").text("N/A")}, 20000);
                   },
                   error: ....
                  )};
  });

这似乎按照我的计划进行，因为文本将在20秒后变回“N / A”。但是，我发现存在一个问题：如果用户继续单击按钮：说用户单击按钮1st将文本更改为“已更新”，然后在18秒后再次单击以将文本更改为“未更新”。然后，仅在2秒后，文本将变回“N / A”，因为第一个setTimeout函数已执行。

如果我想记住最后一次用户点击，并且只在用户最后一次点击后20秒更新div文本？如何轻松实现这一目标？

谢谢！

Answer 1

保留计时器的句柄：

timerId = setTimeout(...);
每次重新启动计时器时，请先清除旧的：

clearTimeout(timerId);

e.g：

$("button#pressme").bind("click", function() {
       var that = this;
       $.ajax{(
               type:"POST",
               .....
               success: function (xml, status) {
                 var timerId = $(that).data('timerId');
                 .....
                 $("div#status").text("updated");
                 if (timerId) { 
                     clearTimeout(timerId);
                 }
                 timerId = setTimeout(function(){$("div#status").text("N/A")}, 20000);
                 $(that).data('timerId', timerId)
               },
               error: ....
              )};
  });

EDIT 以显示使用jQuery .data()方法在每个元素的基础上存储和检索timerId。

jquery队列事件？

1 个答案: