javascript - 多个 ajax 只允许最新调用

Question

我有一个输入框，每次按键时都会在该输入框上发出 ajax 请求。所以如果我输入单词“name”，将会有 4 个成功的请求。所以我实际上只想要执行的最新请求。所以如果我输入单词“name”，将只有一个请求，这将是最后一个。

我也有一个解决方案(这是一个简单的点击方法示例)

JS脚本

var callid = 1;

function ajaxCall (checkval ){
    if(checkval == callid){
        $.ajax({
            type: 'post',
            url: baseurl + "test/call_ajax",
            data: {
                val: "1"
            },
            success: function(data) {
                console.log(data)
            }
        });
    }
}

function call(){
    var send = callid+=1;
    setTimeout( function(){ ajaxCall(send)  } , 500);
}

html脚本

<a href="#" onclick="call()" > Call ajax </a>

这是完美的工作。但我在想是否有办法进一步完善它。

任何想法:)

Answer 1

我相信您正在寻找一些更好的事件调度意图技术。

var eventDispatcher = null;
$('.textbox').keyup(function(){
   if(eventDispatcher) clearTimeout(eventDispatcher);
   eventDispatcher = setTimeout(function(){
       $.ajax({ ... });
   }, 300);
});