JS处理延迟后输入仅一次

我想侦听输入字段，并在输入值精炼后 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"。

如何解决？

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

这是因为您使用的是 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");
});

相关内容

最新更新

热门标签：