JavaScript onkeyup延迟函数调用

Question

JavaScript onkeyup延迟函数调用

3

我想编写一个 JavaScript 函数，触发 onkeyup 事件，并调用一个主解析函数，但仅当没有按键按下至少 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毫秒没有输入任何内容时才会调用警报。

- ZeDonDino

1

在JavaScript中，你不能使用"wait"，但是你可以使用一个全局变量来存储一个通过setTimeout创建的超时。每当发生keyup事件时，清除（如果存在）现有的超时并设置下一个超时。你已经尝试过什么了？你的代码在哪里？ - David-SkyMesh

2个回答

1

<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>

演示

- Okan Kocyigit

做得很好。对我有帮助！ - Zeeshan Cornelius

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shadow Wizard Chasing Stars · Accepted Answer

您可以使用计时器，每次还需要清除先前的计时器。

为了实现这一点，最好使用“包装器”函数：

<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毫秒执行该函数。实时测试用例。