我试图在加载程序图标和成功之间添加一个小延迟(2秒),数据为html。
我试图使用的是setTimeout并输入一个延迟号。这不起作用,所以我希望你能告诉我正确的方法是什么。
我的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>
现在它的运行速度非常快。希望有人可以提供帮助。
答案 0 :(得分:7)
setTimeout
应在success
function
内使用。
$(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>
答案 1 :(得分:3)
这是我想要做同样事情时发现的事情:
function doStuff()
{
//do some things
setTimeout(continueExecution, 10000) //wait ten seconds before continuing
}
function continueExecution()
{
//finish doing things after the pause
}
希望它会帮助你
答案 2 :(得分:0)
像这样使用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>
答案 3 :(得分:0)
$(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"));
}
&#13;
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;