I am trying to add a small delay (2 sec) between the loader icon and the success with the data as html.
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.
My ajax code:
<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.
In responsive interface, the programmer needs to delay the ajax request to achieve some task before the response. This can be achieved by using jQuery setTimeout() function. This function executes the given Ajax code after some amount of given time.
Creating a function that calls the AJAX request and using this function in setInterval() and set Interval for 5 sec. Now the function executes every 5 seconds and fetches new data from the server. It repeatedly executes the function even when the previous AJAX request is not successfully executed and return.
Sometimes an underlying performance problem will prevent the AJAX calls that JIRA uses from completing within the normal timeout of 30 seconds.
AJAX: Synchronous or Asynchronous Synchronously, in which the script stops and waits for the server to send back a reply before continuing. Asynchronously, in which the script allows the page to continue to be processed and handles the reply if and when it arrives.
setTimeout
should be used inside 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>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With