Call some jquery 3 seconds after .load()

Question

I have this this jquery that loads a success message in a modal:

$('#menu_access').load(
    site_url + sUrl,
    function() {
        $(this).dolPopup(oPopupOptions);
    }
);

I want to call this function three seconds after the load:

$('#menu_access').dolPopupHide({});

I'm not sure how to go about it. I'm not too familiar with the .load() function.

Answer 1

Use the .delay() function.

Answer 2

Use a call to setTimeout(...)

$('#menu_access').load(
    site_url + sUrl,
    function() {
        $(this).dolPopup(oPopupOptions);
        setTimeout(function () {
            $('#menu_access').dolPopupHide({});
        }, 3000);
    }
);

Answer 3

You can use jQuery's delay() method, but you need to add your plugin call to the queue using jQuery's .queue() method.

$('#menu_access').load(
    site_url + sUrl,
    function() {
        $(this).dolPopup(oPopupOptions);
        $(this).delay(3000)
               .queue( function( nxt ) {
                      $(this).dolPopupHide({});
                      nxt();
                });
    }
);

Note that the parameter to the function passed to .queue() needs to be called in order to allow the next animation to occur (at any time).

As an alternative, you can use setTimeout(), but you need to make sure the value of this is correct in the callback.

$('#menu_access').load(
    site_url + sUrl,
    function() {
        $(this).dolPopup(oPopupOptions);
        var that = this;
        setTimeout(function() {
                      $(that).dolPopupHide({});
                }, 3000);
    }
);

Here this is referenced by the variable that.

Or you could use jQuery's $.proxy() method to ensure the proper meaning of this.

$('#menu_access').load(
    site_url + sUrl,
    function() {
        $(this).dolPopup(oPopupOptions);
        setTimeout($.proxy(function() {
                      $(this).dolPopupHide({});
                }, this), 3000);
    }
);