javascript - 如何使用onkeyup延迟ajax请求并在onkeyup时再次开始计数延迟？

Question

如何使用 onkeyup 延迟 ajax 请求并在 onkeyup 时再次开始计数延迟？

例如代码，当用户将数据填充到 id="fname" (onkeyup)

span id="loading" 将显示

然后2秒，数据将发布到test.php

这段代码运行良好。

但我想这样申请

当用户将数据填充到id="fname"(onkeyup)时

span id="loading" 将显示

2秒内用户再次将数据填入id="fname"(onkeyup)，清除延迟时间并重新开始计数延迟，

然后2秒，数据将发布到test.php

我怎样才能做到这一点？

<form id="fid">
<input type="text" id="fname" onkeyup="myFunction()">
<span id="loading" style="display: none;">LOADING</span>
<span id="myplace"></span>
</form>

<script>
function myFunction() {
    $('#myplace').hide();
    $("#loading").show();
    setTimeout(function(){
        $.ajax
        (
            {
                url: 'test.php',
                type: 'POST',
                data: $('#fid').serialize(),
                cache: false,
                success: function (data) {
                    $("#loading").hide();
                    $('#myplace').show();
                    $('#myplace').html(data);
                }
            }
        )
    }, 2000);
}
</script>

Answer 1

setTimeout 会给你返回一个唯一的 id。现在如果用户在“超时时间”内输入，就可以使用这个id取消之前的超时功能。

var timeoutId = setTimeout(function(){},2000);
clearTimeout(timeoutId)

编辑:

使用您的代码，它应该看起来像这样:

<form id="fid">
<input type="text" id="fname" onkeyup="myFunction()">
<span id="loading" style="display: none;">LOADING</span>
<span id="myplace"></span>
</form>

<script>
(function(){
var currentTimeoutId;
function myFunction() {
    $('#myplace').hide();
    $("#loading").show();

    if(currentTimeoutId){
       clearTimeout(currentTimeoutId);
    }

    currentTimeoutId = setTimeout(function(){
        currentTimeoutId = null;
        $.ajax
        (
            {
                url: 'test.php',
                type: 'POST',
                data: $('#fid').serialize(),
                cache: false,
                success: function (data) {
                    $("#loading").hide();
                    $('#myplace').show();
                    $('#myplace').html(data);
                }
            }
        )
    }, 2000);
}
}());
</script>