Question

我有一个输入字段，用户可以在其中输入长值。然后将该值用作复杂耗时函数中的输入值。

我的问题是：如何在用户完成打字后大约1秒钟开始执行此功能？（我不希望在每次按键后都运行它，因为它确实使页面变慢）。因此，如果他的下一次击键是在最后一次击键的1s限制内，那么等待额外的秒数。

你有什么建议吗？

补充说明：我还需要将一些参数传递给此函数

Answer 1

使用setTimeout和clearTimeout

<input type='text' id='text'>

var timer = null;
$('#text').keydown(function(){
       clearTimeout(timer); 
       timer = setTimeout(doStuff, 1000)
});

function doStuff() {
    alert('do stuff');
}

Answer 2

这已经很晚了，我知道，但我真的不喜欢每次需要时都需要的代码行，所以我将逻辑提取到只运行一次的页面启动函数。

(function(){
    var keystoppedTimer = null;
    var keystoppedInputs = document.getElementsByTagName('input');
    for (var i = 0, l = keystoppedInputs.length; i < l; i++) {
        keystoppedInputs[i].addEventListener('keydown', function(event){
            clearTimeout(keystoppedTimer);
            keystoppedTimer = setTimeout(function() {
                event.target.dispatchEvent( new Event('keystopped') );
            }, 600);
        }, false);
    }
}());

添加它（将其视为polyfill），可以更简单地使用。要定位用户停止输入，您需要做的就是为元素添加一个事件监听器，以“keystopped”为目标。

inputElement.addEventListener('keystopped', function(event){
    console.log('Stopped typing');
}, false);

我选择keystopped，因为它与keydown，keyup等匹配。

Answer 3

使用bindWithDelay jQuery插件：

element.bindWithDelay(eventType, [ eventData ], handler(eventObject), timeout, throttle)

Answer 4

我已经发布了一个解决方案，当它显示用户正在键入并且用户停止输入

时

function typingAction(){
  $('#typing').text("user is typing....");
clearTimeout();
setTimeout(()=>{
  $('#typing').text(' user stopped typing.....'); //**can call your function here**
  },2000);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <title>Chat | ChatApp</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="/css/styles.css">
</head>

<body >
   
<p id="typing"></p>
<input name="message" type="text" placeholder="Message" autofocus autocomplete="off" oninput="typingAction()" />
  


</body>

</html>

用户停止输入后运行功能

4 个答案: