javascript delay after onkeup

Question

So referencing this: How to delay the .keyup() handler until the user stops typing?

I came up with the following code. But it does nothing... Any suggestions?

I am trying to get the setTimeout to cancel if the user types something further, so that multiple alerts don't happen, only one when the user finally 'stops' (hopefully).

Thanks!!

var t = 0;  
$('input').keyup(function(){
    clearTimeout(t);
    t = setTimeout(alert($('input').val()),1000);
}

http://stackoverflow.com/questions/13387958/how-to-stop-ajax-calls-if-theres-an-error-on-a-field-with-a-keyup-trigger/13388050#13388050 — Martin Lyne, Nov 23 '12 at 21:46

Denys Séguret · Accepted Answer · 2012-11-23T21:47:30.557

2

Replace

t = setTimeout(alert($('input').val()),1000);

with

t = setTimeout(function(){alert($('input').val())},1000);

You were passing the value of the input to setTimeout, while setTimeout needs a function (or a string it can evaluate as code) as first argument.

And replace the last line with }); so that the code compiles.

Demonstration

edited Nov 23 '12 at 21:47

answered Nov 23 '12 at 21:42

Denys Séguret

372,613
87
782
758

How strange! Can you tell me why mine is not working? http://jsfiddle.net/x9774/15/ – eatonphil Nov 23 '12 at 21:48
@phileaton It doesn't compile because last line should be }); – Denys Séguret Nov 23 '12 at 21:49
@Selosindis Obviously. But I suppose the real world case would have a more interesting selector, probably ID based. There would be no interest in echoing **all** inputs of the page ! – Denys Séguret Nov 23 '12 at 21:51
Absolutely, but it seems pertinent as part of this issue. – Selosindis Nov 23 '12 at 21:51

score 1 · Answer 2 · answered Nov 23 '12 at 21:47

1

You can't get the .val() of a list of elements. $('input') is selecting all inputs on the screen and will only ever give the value of the first one in the list.

This code should work for all inputs, but only run the timeout on the one that fired the event.

var t = 0;  
$('input').keyup(function(){
    var that = this;

    clearTimeout(t);
    t = setTimeout(function() {
        alert($(that).val());
    }, 1000);
}

I hope this helps!

answered Nov 23 '12 at 21:47

Selosindis

544
5
12

Well, jQuery it will get the val of the *first one*, but that's often not what's intended. – JayC Nov 23 '12 at 21:51

score 0 · Answer 3 · answered Nov 23 '12 at 21:55

To prevent confusion on several different inputs, use this reference, keep timeout in data():

var out = $('#out');
$('input').keyup(function() {
    var $this = $(this);
    clearTimeout($this.data('timeout'));
    $this.data('timeout', setTimeout(function() {
        out.append($('<div>').text(($this.attr('id') + ': ' + $this.val())));
    }, 1000));
});

demo

javascript delay after onkeup

3 Answers3