ローダーアイコンとデータをhtmlとして使用して成功するまでに、わずかな遅延(2秒)を追加しようとしています。
私が使用しようとしたのは、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>
今、それは本当に速く走ります。誰かが助けてくれることを願っています。
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>
これは私が同じことをしたかったときに私が見つけたものです:
function doStuff()
{
//do some things
setTimeout(continueExecution, 10000) //wait ten seconds before continuing
}
function continueExecution()
{
//finish doing things after the pause
}
それがあなたを助けることを願っています
次のように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>
$(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>