Javascript JS仅在延迟后处理输入一次_Javascript_Jquery_Timeout_Delay

Javascript JS仅在延迟后处理输入一次

javascript jquery

Javascript JS仅在延迟后处理输入一次,javascript,jquery,timeout,delay,Javascript,Jquery,Timeout,Delay,我想听输入字段，并在输入值结束后的3秒后运行从输入值到输出值的处理 <html> <head> <meta charset="utf-8"> <script src="jquery.js"></script> <script> $(document).ready(function() { $('.input').on('input', function() { var value = $(this).

我想听输入字段，并在输入值结束后的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>


$（文档）.ready（函数（）{
$（'.input'）。在（'input'，function（）上{
var值=$（this.val（）；
console.log（'触发输入：'+值）；
setTimeout（函数（）{
log（'将输出更改为：'+值）；
$（'.output'）.text（value）；//操作示例
}, 3000);
});
});

...

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

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

如何解决这个问题

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

这是因为您使用的是

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");
});

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

这是因为您使用的是

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");
});

这是因为每次按键时都会触发

input

事件。您需要消除超时（已接受答案的第二部分显示）的影响，这是因为

input

事件会在每次按键时触发。您需要消除超时（已接受答案的第二部分显示）