Javascript 在ajax调用中设置延迟
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33395048/
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
Set a delay in ajax call
提问by Mikkel
I am trying to add a small delay (2 sec) between the loader icon and the success with the data as html.
我试图在加载器图标和数据为 html 的成功之间添加一个小的延迟（2 秒）。
What I have tried to use is the setTimeout and put in a delay number. This is not working, so I was hoping you could show me what the correct way is.
我尝试使用的是 setTimeout 并输入延迟数。这是行不通的，所以我希望你能告诉我正确的方法是什么。
My ajax code:
我的ajax代码：
<script type="text/javascript">
$(function () {
var delay = 2000;
var res = {
loader: $("<div />", { class: "loader" })
};
$('#search').on('click', function () {
$.ajax({
type: 'GET',
url: "@Url.Action("Find", "Hotel")",
datatype: "html",
beforeSend: function () {
$("#group-panel-ajax").append(res.loader);
setTimeout(delay);
},
success: function (data) {
$("#group-panel-ajax").find(res.loader).remove();
$('#group-panel-ajax').html($(data).find("#group-panel-ajax"));
}
});
return false;
});
});
</script>
Right now it runs really fast. Hope someone can help.
现在它运行得非常快。希望有人能帮忙。
回答by Kishore Sahasranaman
setTimeoutshould be used inside successfunction.
setTimeout应该用在里面successfunction。
$(function() {
var delay = 2000;
var res = {
loader: $("<div />", {
class: "loader"
})
};
$('#search').on('click', function() {
$.ajax({
type: 'GET',
url: "@Url.Action("Find", "Hotel")",
datatype: "html",
beforeSend: function() {
$("#group-panel-ajax").append(res.loader);
},
success: function(data) {
setTimeout(function() {
delaySuccess(data);
}, delay);
}
});
return false;
});
});
function delaySuccess(data) {
$("#group-panel-ajax").find(res.loader).remove();
$('#group-panel-ajax').html($(data).find("#group-panel-ajax"));
}<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>回答by Hadrien Delphin
here is something i found when i wanted to do the same :
这是我在想做同样的事情时发现的：
function doStuff()
{
//do some things
setTimeout(continueExecution, 10000) //wait ten seconds before continuing
}
function continueExecution()
{
//finish doing things after the pause
}
hope it will help ya
希望它会帮助你
回答by Ragnar
Use setTimeout()like this:
setTimeout()像这样使用：
<script type="text/javascript">
$(function () {
var delay = 2000;
var res = {
loader: $("<div />", { class: "loader" })
};
$('#search').on('click', function () {
$.ajax({
type: 'GET',
url: "@Url.Action("Find", "Hotel")",
datatype: "html",
beforeSend: function () {
$("#group-panel-ajax").append(res.loader);
},
success: function (data) {
setTimeout(function(){
$("#group-panel-ajax").find(res.loader).remove();
$('#group-panel-ajax').html($(data).find("#group-panel-ajax"));
}, delay);
}
});
return false;
});
});
</script>
回答by user1739043
$(function() {
var delay = 2000;
var res = {
loader: $("<div />", {
class: "loader"
})
};
$('#search').on('click', function() {
$.ajax({
type: 'GET',
url: "@Url.Action("Find", "Hotel")",
datatype: "html",
beforeSend: function() {
$("#group-panel-ajax").append(res.loader);
},
success: function(data) {
setTimeout(function() {
delaySuccess(data);
}, delay);
}
});
return false;
});
});
function delaySuccess(data) {
$("#group-panel-ajax").find(res.loader).remove();
$('#group-panel-ajax').html($(data).find("#group-panel-ajax"));
}<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>