jquery onchange set timeout

Question

I want certain code to fire when user change a quantity in a input field. but when user use the little up and down arrow to increase and decrease the quantity quickly. Like press it 5 time to get to 5. I dont want the code to fire 5 times. So I want to set a timer. When on change event is detected it will wait for 1 sec or wait until the on change has stopped. Then grab the latest value.

So is there a way to detect multiple changes in short time span and no nothing. Then if the change happen and no more change happen after x amount to time. do something.

$("#quantity").on('change',function(){
    setTimeout(function(){ 
        console.log("fired");
    }, 1000);
});

My code is just delaying the fired.

So how can we accomplish this.

Found duplicated question with answer here Jquery change with delay

NVM guys found duplicate question with answer here http://stackoverflow.com/questions/9424752/jquery-change-with-delay — codenoob, Feb 21 '17 at 01:15
Sorry, didn't see your comment until after posting my answer. Maybe it will help anyway... — rasmeister, Feb 21 '17 at 01:16

score 3 · Answer 1 · edited Jan 23 '19 at 16:50

3

The code below will delay the work until 3 seconds have passed since the last 'input' event. It does this by cancelling the previous timeout (via clearTimeout) if another 'input' event occurs before the timeout executes its function.

 let time = 0;

 // On change paste keyup.
 $('#address_1').on('input', function () {
     // Reset the timer
     clearTimeout(time);

     time = setTimeout(function() {
         // enter code here or a execute function.
         doGeocode();
     }, 3000);
 });

edited Jan 23 '19 at 16:50

Ryan Cogswell

75,046
9
218
198

answered Jan 23 '19 at 13:22

Dragi Postolovski

396
3
17

please consider adding an explanation for the posted code to help increase understanding for the OP – GregH Jan 23 '19 at 16:15

score 2 · Accepted Answer · answered Feb 21 '17 at 01:15

2

Here's what I've done on input boxes to prevent triggering frequent changes while user is typing:

         var timeoutId = 0;    
         object.dom.input.addEventListener('input',function() {
            clearTimeout(timeoutId);
            // do stuff
            // Fire our onchange event
                if (this.delayOnChange > 0) {
                    timeoutId = setTimeout(function() { this.onchange() }, this.delayOnChange);
                } else {
                    this.onchange();
                }
            }
        },false);

This checks to see if we have set a 'delayOnchange', and if we have delay the trigger of an 'onchange()' event. We reset the timer (clearTimeout()) each time a change is made to the input so we are basically waiting for the user to stop fast typing before triggering the onchange.

answered Feb 21 '17 at 01:15

rasmeister

1,986
1
13
19

this works too. I think yours works better for long typing situation since it constantly refresh timer as long as user is typing. the other question's answer was simply wait for 1 second. Will accept after 10mins – codenoob Feb 21 '17 at 01:18
A second is definitely too long a delay regardless. I find that anything over about 1/2 sec gets uncomfortable for the user. The benefit here is that you can set the delay differently depending on the situation. If they are clicking an up / down arrow you might shorten the time to maybe 300 msec. Of course, it will also depend on what the fired event does and how that affects the user experience. – rasmeister Feb 21 '17 at 01:25
There is missing code here! Please fix this. – Abdullah Al Farooq Jan 21 '22 at 13:50

jquery onchange set timeout

2 Answers2