Question

I am working on JQuery UI, i am blocking UI on click on anchor, on clicking i am loading some url into a div thats why i am blocking UI to prevent clicking then unblocks it,
the problem arising is that Blocking is occuring one one second(or less) and suddenly unblocks and in this case the request URL didn’t load completly and user is able to click another anchor

$('.carousel-main .carousel ul li a').each(function () {
            $(this).click(function (e) {

    $.blockUI({ message: "Please wait..." }); 
                e.preventDefault();
                var hrefvalue = $(this).attr('href');
                CallAction(hrefvalue, true);
                $.unblockUI()

            });
        });

The above code is working fine, i also tried using below code in place of $.blockUI but nothing happens in using below code

var timeout = setTimeout(function() {
    $.blockUI({ message: "Please wait..." }); 
}, 2000);

How can i set timeinterval for this situation

Answer 1

Your code when beautified looks like this:

$('.carousel-main .carousel ul li a').each(function () {
    $(this).click(function (e) {

        $.blockUI({
            message: "Please wait..."
        });
        e.preventDefault();
        var hrefvalue = $(this).attr('href');
        CallAction(hrefvalue, true);
        $.unblockUI()

    });
});

It means that $.blockUI and $.unblockUI are called one after another without the interpreter going into the event loop. Probably even if your CallAction is blocking (but I assume that it isn’t since you wouldn’t need to block the UI then) the $.blockUI wouldn’t get a chance to do anything.

Try removing the $.unblockUI from this function and see if the $.blockUI call actually does what you want. If it does then you’d have to call $.unblockUI() in some callback function that is called after whatever you are waiting for is done – not in the same function where you’re calling the $.blockUI.

You didn’t show the code for which you want to wait, but assuming that you are doing an AJAX call inside CallAction then you would need to call the $.unblockUI in the callback of that AJAX call.

(As a sidenote – keep in mind that the AJAX request may never finish and hang your UI forever so you should add some timeout to unblock the UI after some time.)