Javascript onkeyup delayed function call

Question

I want to make a Javascript function that fires onkeyup event and its task is to call a main resolver function but only if no keys are fired for at least x milliseconds where x is the functions parameter.

For instance:

We have html code:

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

and Javascript something like:

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

So while I'm typing the alert won't be called until you don't type anything for at least x ms.

You can't "wait" in Javascript, but you could use a global variable to store a timeout (created with `setTimeout`). When each `keyup` event occurs, clear (if present) the existing timeout and set the next one. What have you already tried? Where's your code?. — David-SkyMesh, Dec 17 '12 at 08:47

Shadow Wizard Says No More War · Accepted Answer · 2012-12-17T08:58:22.083

9

You can use a timer, you also need to clear the previous timer each time.

To achieve this, better use "wrapper" function:

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

And the JavaScript:

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

This will execute the function 500 milliseconds after the last key up event.

Live test case.

edited Dec 17 '12 at 08:58

answered Dec 17 '12 at 08:52

Shadow Wizard Says No More War

64,101
26
136
201

This doesn't help at all. Like i've said, the function execution need to be only once after x ms. Not every time you have the keyup event. – ZeDonDino Dec 17 '12 at 08:56
@ZeDonDino see the answer now. – Shadow Wizard Says No More War Dec 17 '12 at 08:57
Ok this will do it. var _timer = 0; function DelayedCallMe(ms) { if (_timer) window.clearTimeout(_timer); _timer = window.setTimeout(function() { callMe(); }, ms); } function callMe() { alert("haha"); } – ZeDonDino Dec 17 '12 at 09:00
@ZeDonDino cheers, if the number is the delay amount, just replace 500 with `num`. – Shadow Wizard Says No More War Dec 17 '12 at 09:01
Whatever, I'm a noob and cant even post code to comments. But thanks mate for your help – ZeDonDino Dec 17 '12 at 09:02
What code you want to post? You can edit your question with more code if you want and let me know. – Shadow Wizard Says No More War Dec 17 '12 at 09:14

Okan Kocyigit · Answer 2 · 2012-12-17T09:03:18.637

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>

DEMO

edited Dec 17 '12 at 09:03

answered Dec 17 '12 at 08:58

Okan Kocyigit

12,913
18
65
126

nicely done. Worked for me! – Zeeshan Cornelius Oct 26 '15 at 07:47

Javascript onkeyup delayed function call

2 Answers2

Linked