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。现在，如果用户在＆＃34;超时时间＆＃34;内输入，您可以使用此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>

Answer 2

我建议你使用一些不同的算法：

每次用户更改INPUT的值时，

中止ajax请求，并在停止输入时发送新的请求：

定义超时指针和ajax

window.tPointer = null;
window.ajaxPointer = null;

然后定义事件处理函数

$("#fname").on("keyup" function(e){

停止冒泡活动

    e.stopPropagation();

如果存在则清除超时

    if(window.ajaxPointer != null) {

定义超时为.2秒，例如

    clearTimeout(window.tPointer);
        window.ajaxPointer = null
    }

检查是否ajax没有中止？

    if(window.ajaxPointer != null) {

中止ajax，尝试{} catch {}构造以忽略异常

        try{window.ajaxPointer.abort();}cachet(e){}
    }

定义超时为.2秒，例如

    window.tPointer = setTimeout(myFunction, 200);
}

稍微修改一下功能

function myFunction() {

将超时指针设置为null

    window.tPointer = null;        
    $('#myplace').hide();
    $("#loading").show();

将ajax指针设置为ajax请求对象

    window.ajaxPointer = $.ajax ({
        url: 'test.php',
        type: 'POST',
        data: $('#fid').serialize(),
        cache: false,
        success: function (data) {
            $('#myplace').html(data);
        },
        complete: function(){

删除comlete中的加载隐藏

            $("#loading").hide();
            $('#myplace').show();

将ajax指针设置为null

            window.ajaxPointer = null;
        }
    })
}

完整代码

window.tPointer = null;
window.ajaxPointer = null;

$("#fname").on("keyup" function(e){
    e.stopPropagation();

    if(window.ajaxPointer != null) {
        clearTimeout(window.tPointer);
        window.ajaxPointer = null
    }

    if(window.ajaxPointer != null) {
        try{window.ajaxPointer.abort();}cachet(e){}
    }

    window.tPointer = setTimeout(myFunction, 200);
}

function myFunction() {
    window.tPointer = null;        
    $('#myplace').hide();
    $("#loading").show();
    window.ajaxPointer = $.ajax ({
        url: 'test.php',
        type: 'POST',
        data: $('#fid').serialize(),
        cache: false,
        success: function (data) {
            $('#myplace').html(data);
        },
        complete: function(){
            $("#loading").hide();
            $('#myplace').show();
            window.ajaxPointer = null;
        }
    })
}

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

2 个答案: