Javascript onkeyup延迟函数调用[重复]答案

【问题标题】：Javascript onkeyup delayed function call [duplicate]Javascript onkeyup延迟函数调用[重复]
【发布时间】：2012-12-04 08:28:32
【问题描述】：

我想创建一个触发 onkeyup 事件的 Javascript 函数，它的任务是调用主解析器函数，但前提是至少 x 毫秒内没有触发任何键，其中 x 是函数参数。

例如：

我们有html代码：

<body>
    <input type="text" id="suggestion" onkeyup="callMe(200);"/>
</body>

和 Javascript 类似：

<script type="text/javascript">
    function callMe(ms)
    {
        //wait at least x ms then call main logic function
        // e.g. doMain();
        alert("I've been called after timeout"); //for testing purposes
    }
</script>

因此，当我输入时，除非您至少 x 毫秒内没有输入任何内容，否则不会调用警报。

【问题讨论】：

您不能在 Javascript 中“等待”，但您可以使用全局变量来存储超时（使用 setTimeout 创建）。当每个keyup 事件发生时，清除（如果存在）现有超时并设置下一个。你已经尝试了什么？你的代码呢？

标签： javascript events timer dom-events

【解决方案1】：

可以使用定时器，也需要每次清空前一个定时器。

要实现这一点，最好使用“包装器”功能：

<input type="text" id="suggestion" onkeyup="DelayedCallMe(200);"/>

还有 JavaScript：

var _timer = 0;
function DelayedCallMe(num) {
    if (_timer)
        window.clearTimeout(_timer);
    _timer = window.setTimeout(function() {
        callMe(num);
    }, 500);
}

这将在最后一次按键事件后 500 毫秒执行函数。

Live test case.

【讨论】：

这根本没有帮助。就像我说过的，函数执行只需要在 x 毫秒之后执行一次。不是每次都有 keyup 事件。
@ZeDonDino 立即查看答案。
好的，这就行了。 var _timer = 0; function DelayedCallMe(ms) { if (_timer) window.clearTimeout(_timer); _timer = window.setTimeout(function() { callMe(); }, ms); } 函数 callMe() { alert("haha"); }
@ZeDonDino 加油，如果数字是延迟量，只需将 500 替换为 num。
无论如何，我是个菜鸟，甚至无法将代码发布到 cmets。但是感谢队友的帮助

【解决方案2】：

<input type="text" id="suggestion" onkeyup="callMe(200);"/>
<script>
    var to;
    function callMe(ms) {
       clearTimeout(to);
       to = setTimeout(function(){
           alert("I've been called after timeout");
       }, ms);
    }
</script>

DEMO

【讨论】：

做得很好。为我工作！