代码之家  ›  专栏  ›  技术社区  ›  Klaus Byskov Pedersen

执行具有滑动延迟的函数

  •  2
  • Klaus Byskov Pedersen  · 技术社区  · 14 年前

    假设我有一个html页面,其中显示了一些元素的列表。有一个文本框允许用户筛选元素。要更新显示的元素,我需要执行ajax调用来检索与过滤器值匹配的元素。我希望在过滤器文本框中键入最后一个字母后两秒钟执行ajax调用。我知道 settimeout 但是我希望两秒钟的延迟是“滑动的”,这意味着如果在两秒钟的延迟期间内用户键入另一个字母,那么我希望重置延迟。我该怎么办?

    提前谢谢。

    1 回复  |  直到 14 年前
        1
  •  2
  •   Klaus Byskov Pedersen    14 年前

    setTimeout 返回一个句柄(一个数字),您可以使用它通过 clearTimeout ,因此keydown事件的处理程序可以执行以下操作:

    var timerHandle = 0;
    function handler() {
        // Clear the previous timer if it hasn't already happened
        if (timerHandle != 0) {
            clearTimeout(timerHandle);
        }
    
        // Call `tick` in 2 seconds or so
        timerHandle = setTimeout(tick, 2000);
    }
    function tick() {
        // The timer has gone off, clear the handle
        timerHandle = 0;
    }
    

    注意我们正在清理 timerHandle 当计时器功能运行时,否则,下一个键按下将导致我们试图取消不再存在的计时器。我从来没有遇到过抱怨的浏览器,但是,我也从来没有碰运气。。。