在使用 jquery 发送新的 ajax 请求之前添加延迟
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3972911/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add delay before sending new ajax request using jquery
提问by gearsdigital
I have a list of links wich point to html pages.
我有一个指向 html 页面的链接列表。
<ul id="item-list">
<li><a href="assets/data/item1.html">Item 1</a></li>
<li><a href="assets/data/item2.html">Item 2</a></li>
<li><a href="assets/data/item3.html">Item 3</a></li>
<li><a href="assets/data/item3.html">Item 4</a></li>
</ul>
And i have a javascript(jquery) wich recives and append the html to my document.
我有一个 javascript(jquery) 可以接收并将 html 附加到我的文档中。
var request;
$('#item-list a').live('mouseover', function(event) {
if (request)
request.abort();
request = null;
request = $.ajax({
url: $(this).attr('href'),
type: 'POST',
success: function(data) {
$('body').append('<div>'+ data +'</div>')
}
});
});
I've tried to work with setTimeout() but it does not work as i aspected.
我曾尝试使用 setTimeout() 但它不像我所认为的那样工作。
var request, timeout;
$('#item-list a').live('mouseover', function(event) {
timeout = setTimeout(function(){
if (request)
request.abort();
request = null;
request = $.ajax({
url: $(this).attr('href'),
type: 'POST',
success: function(data) {
$('body').append('<div>'+ data +'</div>')
}
});
}, 2000
);
});
How can i tell jquery to wait (500ms or 1000ms or …) on hover before sending the new request?
我如何告诉 jquery 在发送新请求之前等待（500 毫秒或 1000 毫秒或……）悬停？
回答by netadictos
I think that perhaps instead of aborting the request, you should control the ajax requests with a variable, for example, called processing=false, that would be reset to false, in the success/error function.
Then you would only execute the function in setTimeout, if processing was false.
我认为，也许不是中止请求，您应该使用一个变量来控制 ajax 请求，例如，调用processing=false，在成功/错误函数中，该变量将重置为 false。然后，如果处理为假，您将只在 setTimeout 中执行该函数。
Something like:
就像是：
var request, timeout;
var processing=false;
$('#item-list a').live('mouseover', function(event) {
timeout = setTimeout(function() {
if (!processing) {
processing=true;
request = $.ajax({
url: $(this).attr('href'),
type: 'POST',
success: function(data) {
processing=false;
$('body').append('<div>'+ data +'</div>')
}
});
}
}, 2000);
});
回答by jellyfishtree
$.fn.extend( {
delayedAjax: function() {
setTimeout ($.ajax, 1000 );
}
});
$.fn.delayedAjax();
Seems to work but probably not the prettiest solution. Also, you need to add some code to pass the args & the timeout val if you want
似乎有效，但可能不是最漂亮的解决方案。此外，如果需要，您需要添加一些代码来传递参数和超时值
回答by Goyuix
You will need to have a variable that can act a countdown timer if you will, that a mouseout event will cancel as well...
如果愿意，您将需要一个可以充当倒数计时器的变量，鼠标移出事件也将取消......
$(function(){
$("#item-list a").live("mouseover",function(){
var a = $(this);
a.data("hovering","1");
setTimeout(function(){
if (a.data("hovering") == "1") {
// this would actually be your ajax call
alert(a.text());
}
}, 2000);
});
$("#item-list a").live("mouseout",function(){
$(this).data("hovering","0");
});
});
回答by Cali
this works for me...
这对我有用...
$(show_id).animate({
opacity: 0
}, 5000, function() {
$(show_id).html(data)
});
