javascript 用户停止输入后运行函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5946707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Run function after user has stopped typing
提问by Matej Tymes
I have an input field in which user can input a long value. This value is then used as input value in a complex time consuming function.
我有一个输入字段，用户可以在其中输入一个长值。然后将该值用作复杂耗时函数中的输入值。
My question is: how can I start execution of this function approximately 1 second after the user finished his typing? (I don't want to run it after each key press as it is really slowing the page). So if his next keystroke is in the 1s limit from the last key stroke, than wait additional second.
我的问题是：如何在用户完成打字后大约 1 秒开始执行此功能？（我不想在每次按键后运行它，因为它真的会减慢页面速度）。因此，如果他的下一次击键距离上一次击键的时间在 1 秒以内，那么请再等待一秒钟。
Do you have any suggestions?
你有什么建议吗？
additional note: I also need to pass some parameters into this function
附加说明：我还需要将一些参数传递给这个函数
回答by JohnP
Here's a rough draft : http://jsfiddle.net/jomanlk/msmJp/
这是一个草稿：http: //jsfiddle.net/jomanlk/msmJp/
Uses setTimeoutand clearTimeout
用途setTimeout和clearTimeout
var timer = null;
$('#text').keyup(function(){
clearTimeout(timer);
timer = setTimeout(doStuff, 1000)
});
function doStuff() {
alert('do stuff');
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' id='text'>回答by Andy Mercer
This is really late, I know, but I really disliked the lines of code needed to achieve this every time it was needed, so I extracted the logic into a page initiation function that only runs once.
这真的很晚，我知道，但我真的不喜欢每次需要时实现这一点所需的代码行，所以我将逻辑提取到一个只运行一次的页面启动函数中。
(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);
}
}());
Adding this (think of it as a polyfill), allows for much simpler usage. All you need to do to target the user stopping typing is add an event listener to your element targeting 'keystopped'.
添加这个（把它想象成一个 polyfill），允许更简单的使用。要定位停止输入的用户，您所需要做的就是向您的元素添加一个事件侦听器，以“keystopped”为目标。
inputElement.addEventListener('keystopped', function(event){
console.log('Stopped typing');
}, false);
I picked keystoppedbecause it matches keydown, keyup, etc.
我挑keystopped，因为它相匹配keydown，keyup等等。
回答by Vebjorn Ljosa
Use the bindWithDelayjQuery plugin:
使用bindWithDelayjQuery 插件：
element.bindWithDelay(eventType, [ eventData ], handler(eventObject), timeout, throttle)
回答by Biswadev
I have posted a solution when it ll show user is typing and user stopped type
我已经发布了一个解决方案，它会显示用户正在输入并且用户停止输入
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>