[英]Run function after user has stopped typing
我有一個輸入字段，用戶可以在其中輸入一個長值。 然后將該值用作復雜耗時函數中的輸入值。
我的問題是：如何在用戶完成打字后大約 1 秒開始執行此功能？ （我不想在每次按鍵后運行它，因為它真的會減慢頁面速度）。 因此，如果他的下一次擊鍵在上次擊鍵的 1 秒限制內，那么請再等待一秒鍾。
你有什么建議嗎？
附加說明：我還需要將一些參數傳遞給這個函數
這是一個草稿： http : //jsfiddle.net/jomanlk/msmJp/
使用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'>
這真的很晚了，我知道，但我真的不喜歡每次需要時實現這一點所需的代碼行，所以我將邏輯提取到一個只運行一次的頁面啟動函數中。
(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等。
使用bindWithDelay jQuery 插件：
element.bindWithDelay(eventType, [ eventData ], handler(eventObject), timeout, throttle)
我已經發布了一個解決方案，它會顯示用戶正在輸入並且用戶停止輸入
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>
如何在用戶停止在輸入字段中輸入后運行 function？
[英]How can I run a function after a user has stopped typing in an Input field?
用戶停止鍵入后自動運行js檢查用戶名的可用性不起作用
[英]auto run js check user name availability after user has stopped typing just doesn't work
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.