使用setTimeout定期进行自动完成AJAX调用？
使用setTimeout定期进行自动完成AJAX调用？
提问于 2011-06-17 05:14:20
我想使用一个setTimeout函数，以便最多每1秒进行一次Ajax调用。
这是我所拥有的。这显然不正确，但我不确定setTimeout函数是如何工作的。
function autoComplete(q, succ)
{
setTimeout(
if(q != "") {
$.ajax({type:"GET",
url: "php/search.php",
data: "q="+q,
success: succ
});
}
, 1000);
}我认为我应该使用clearTimeout，这样如果进行另一个调用，它将重置计时器并等待1秒，但当我试图实现它时，它停止了函数的运行。
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-06-17 05:21:13
传一个...函数:)
使用匿名函数可能如下所示：
var timeoutId
function autoComplete(q, succ)
{
if (q) {
// stop previous timeouts
clearTimeout(timeoutId)
timeoutId = setTimeout(function () {
$.ajax({type:"GET",
url: "php/search.php",
data: "q="+q,
success: succ
});
}, 1000);
}
}注意，我将q的检查移到了外部。这不会一次运行两个超时，但可能会有多个正在进行的请求。为了防止这种情况，success回调需要一个守卫--一种简单的方法是使用计数器。在setTimeout中使用q检查“当前q”可能会导致微妙的竞争情况。
var timeoutId
var counter = 0
function autoComplete(q, succ)
{
if (q) {
// Increment counter to maintain separate versions
counter++
var thisCounter = counter
clearTimeout(timeoutId)
timeoutId = setTimeout(function () {
$.ajax({type:"GET",
url: "php/search.php",
data: "q="+q,
success: function () {
// Only call success if this is the "latest"
if (counter == thisCounter) {
succ.apply(this, arguments)
}
},
});
}, 1000);
}
}更智能的版本可能会在提交时读取当前值，因为上面的代码总是会落后一秒...
现在，假设getQ是一个函数对象...
var timeoutId
var counter = 0
function autoComplete(getQ, succ)
{
counter++
var thisCounter = counter
clearTimeout(timeoutId)
timeoutId = setTimeout(function () {
var q = getQ() // get the q ... NOW
if (q) {
$.ajax({type:"GET",
url: "php/search.php",
data: "q="+q,
success: function () {
if (counter == thisCounter) {
succ.apply(this, arguments)
}
},
});
}
}, 1000);
}
// example usage
autoComplete(function () { return $(elm).val() }, successCallback)祝你编码愉快。
需要考虑的一件事是，可能仍然有多个正在处理的请求(第二个示例中的卫士只展示了如何“抛出”旧的响应，而不是如何适当地限制请求)。这可以使用短队列来处理，并防止提交新的AJAX请求，直到获得回复或足够的“超时”过期，并且该请求被认为是无效的。
Stack Overflow用户
发布于 2019-05-30 01:19:28
你也可以尝试这种方式，
var textInput = document.getElementById('input');
var timeout = null; // default set
textInput.onkeyup = function (e) {
// If it has already been set cleared first.
clearTimeout(timeout);
// set timeout to 500ms
timeout = setTimeout(function () {
console.log('Input Value:', textInput.value);
}, 500);
};<input type="text" id="input">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6378696
复制相关文章
相似问题
腾讯云开发者
