Question

我想听输入字段并在输入值完成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>

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

换句话说。我想输入＆＃34; abc＆＃34;，这个值应该在延迟后的一段时间内处理为＆＃34; abc＆＃34;而不是像现在一样处理＆＃34; a＆＃34;然后＆＃34; ab＆＃34;，然后＆＃34; abc＆＃34;。

如何解决这个问题？

Answer 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事件，您可能希望取消之前对该函数的调用？ 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");
});

JS进程输入仅延迟一次

1 个答案: