CODEWITHSUNDEEP
jqueryloaddelay
AJB
AJB

Reputation: 7592

jQuery — Using .delay() to postpone a .load()?

I've just run into an issue with using jQuery's .delay() method (v 1.4.2) to try to delay a following .load() method.

Like so:

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

It seems to just ignore the .delay().

I've evenutally figured out a work-around like so:

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

But, that's not as elegant. Anyone else run into this and found a better solution?

Thanks.

Upvotes: 3

Views: 31822

Answers (3)

Laurens Swart
Laurens Swart

Reputation: 1249

Here's my solution to fading out a div, then loading new content into it, and then fading it back in. This is really usefull 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;
});

Upvotes: 4

user113716
user113716

Reputation: 322532

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

The setTimeout is probably your best option, though you could technically accomplish it with .delay() if you add the load() call to the queue using the queue()(docs) method.

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

The function is added to the queue. You need to then call the parameter of the function to free up the queue. There's a method called the dequeue()(docs) method that can accomplish this as well.

Upvotes: 18

Petah
Petah

Reputation: 46060

If you use the jQuery timers plugin you can do

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

Upvotes: 2

Related Questions