JS只处理一次延迟后的输入答案

【问题标题】：JS process input after delay only onceJS只处理一次延迟后的输入
【发布时间】：2016-05-11 05:12:51
【问题描述】：

我想在输入值完成后 3 秒后监听输入字段并运行处理输入值到输出值。

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

但上面的代码将处理每个字符，而不是预期的完整字符串。

换句话说。我想输入“abc”，这个值应该在延迟后只处理一次“abc”，而不是像现在这样，作为“a”，然后是“ab”，然后是“abc”。

如何解决？

【问题讨论】：

这是因为每次按键都会触发input 事件。您需要debounce超时（已接受答案的第二部分显示）

标签： javascript jquery timeout delay

【解决方案1】：

但上面的代码将处理每个字符，而不是预期的完整字符串。

那是因为您使用了value 变量，该变量的值是您在调度函数时设置的。如果您想要函数运行时的值，请等待并获取它：

$('.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);
});

现在函数将使用函数运行时输入的值。但是还有一个问题：如果你在三秒内收到多个事件，就会收到多个调用。如果您在函数触发之前收到另一个 input 事件，您可能想取消对该函数的早期调用？例如：

$('.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");
});

【讨论】：