Show loading screen while filter is being applied

问题

Applying a filter to an image object that occupies the whole canvas can take a couple seconds with larger images and I want to display a loading screen while this is happening but the .show() method isn't firing until after the filter has been applied.

Current method that applies the filter:

applyFilter: function (index, filter) {
    var obj = designer.baseImage,
        $loading = $('#loading-canvas');

    console.log('show loading');
    $loading.show();

    obj.filters[index] = filter;

    obj.applyFilters(function () {
        console.log('hide loading');
        $loading.hide();
        designer.canvas.renderAll();
    });
}

When the method is called (on click) 'show loading' is logged to the console immediately. The loading div is not displayed until the filter has been applied, at which point the loading screen flashes up, goes away, and 'hide loading' is logged to the console. Any ideas why the loading screen isn't displayed when 'show loading' is logged to the console?

Edit: The loading screen's sole purpose so to indicate to the user that something is happening

回答1:

I think @A wolff is right, you may use

$(".btnDoStuff").click(function () {
        $(".loading").show(function(){
            //dosomestuff
            //remove for Loop, it is just to demonstrate  that some code          is taking time
            for (var i = 0; i < 1000000000; i++) {
                var j = i + 1;
            }
            $(".loading").hide();
        });
    });

however you may also use window.setTimeout

回答2:

@A.Wolff was super close but it appeared to be a timing issue? Here's my solution:

applyFilter: function (index, filter) {
    var obj = designer.baseImage,
        $loading = $('#loading-canvas');

    $loading.show('slow', function () {
        obj.filters[index] = filter;

        obj.applyFilters(function () {
            $loading.hide();
            designer.canvas.renderAll();
        });
    });        
}

The original solution didn't work with show()'s first argument being 0, worked better with 'fast' and works perfectly with 'slow'.

来源：https://stackoverflow.com/questions/30104283/show-loading-screen-while-filter-is-being-applied