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

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

例如代码，当用户将数据填充到id="fname"（onkeyup）中时

范围id="loading"将显示

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

这段代码很好用。

但我想这样申请

当用户将数据填充到id="fname"（onkeyup）中时

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

最佳答案

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>