JQuery - Using .delay () to defer .load ()?

Question

I just ran into the problem of using jQuery.delay () (v 1.4.2) method to try to defer the next .load () method.

Same:

$('myElement').delay(500).load('myPage.php');

It seems to just ignore .delay ().

I even thought about it:

setTimeout(function(){
    $('myElement').load('myPage.php');
}, 500);

But it is not so elegant. Does anyone else come across this and find a better solution?

Thank.

Answer 1

Yes, the delay() ^(docs) method will be ignored because the load() ^(docs) method is not queued automatically.

setTimeoutis probably your best option, although you can technically execute it with .delay()if you add the call load()to the queue using queue() ^(docs) .

$('myElement').delay(500).queue(function( nxt ) {
    $(this).load('myPage.php');
    nxt();
});

. , . , dequeue() ^(docs), .

Answer 2

jQuery timers,

$('myElement').oneTime(500, function() { 
    $(this).load('myPage.php');
});

Answer 3

Here's my solution for fading a div, then loading new content into it, and then fading it out. This is really useful for AJAX calls to load search results, for example.

$('.search').keyup(function(){
    var query= $(this).val();
    $('.results').fadeOut('300');
    setTimeout(function(){
        $('.results').load('search.php?search=' + query, function() {
            $('.results').fadeIn('300'); 
        })
    }, 300);
    return false;
});