JS process input after delay only once

Question

I want to listen input field and run processing input value to output value after 3 seconds after finnishing of inputting value.

<html>
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
    $('.input').on('input', function() {
        var value = $(this).val();
        console.log('Triggered input: ' + value);

        setTimeout(function() {
            console.log('Changing output to: ' + value);
            $('.output').text(value); // example operation
        }, 3000);
    });
});
</script>
</head>
<body>

<input type="text" class="input" />
<hr>
<div class="output">...</div>

</body>
</html>

But the code above will process every single character, instead of expected full string.

In the other words. I want to type "abc", and this value should be processed only one time after delay as "abc", instead of, as now as, as "a", then "ab", then "abc".

How to fix that?

It's because the input event fires on every keypress. You need to debounce the timeout (which the second part of the accepted answer shows) — fdomn-m
– fdomn-m, Commented Feb 2, 2016 at 12:09

T.J. Crowder · Accepted Answer · 2016-02-02 12:14:58Z

But the code above will process every single character, instead of expected full string.

That's because you're using the value variable, whose value you set when scheduling the function. If you want the value as of when the function runs, wait and get it then:

$('.input').on('input', function() {
    var input = $(this);

    setTimeout(function() {
        var value = input.val();
        console.log('Changing output to: ' + value);
        $('.output').text(value); // example operation
    }, 3000);
});

Now the function will use the value of the input as of when the function runs. But there's another problem: If you get multiple events within the three seconds, you'll get multiple calls. You probably want to cancel earlier calls to that function if you get another input event before the function fires? E.g.:

$('.input').on('input', function() {
    var input = $(this);

    // Cancel any outstanding call (no-op if it's already happened)
    var handle = input.data("handle");
    if (handle) {
        clearTimeout(handle);
    }

    // Schedule the new one
    handle = setTimeout(function() {
        var value = input.val();
        console.log('Changing output to: ' + value);
        $('.output').text(value); // example operation
        // Since we've fired, clear the handle
        input.data("handle", 0);
    }, 3000);

    // Remember that handle on the element
    input.data("handle", handle");
});

Collectives™ on Stack Overflow

JS process input after delay only once

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related