应用过滤器时显示加载屏幕答案

【问题标题】：Show loading screen while filter is being applied应用过滤器时显示加载屏幕
【发布时间】：2015-05-08 00:02:50
【问题描述】：

对占据整个画布的图像对象应用过滤器可能需要几秒钟的时间来处理较大的图像，我想在这种情况下显示加载屏幕，但 .show() 方法直到过滤器完成后才会触发已应用。

当前应用过滤器的方法：

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();
    });
}

当方法被调用（点击）时，“显示加载”会立即记录到控制台。在应用过滤器之前，加载 div 不会显示，此时加载屏幕会闪烁，消失，并且“隐藏加载”会记录到控制台。任何想法为什么在将“显示加载”记录到控制台时不显示加载屏幕？

编辑：加载屏幕的唯一目的是向用户指示正在发生的事情

【问题讨论】：

Javascript 是单线程语言。您应该尝试例如：$loading.show(0, function(){obj.filters[index] = filter; //all rest of filters logic here});
一个设计方面要问的问题：用户是否需要查看加载进度，或者只是看到正在发生的事情？对于很多人来说，答案是前者，因为它很简单，但这取决于你的设计。
@MariM 他们“不需要”看到加载进度，加载屏幕是为了表明正在发生的事情
我想我误解了：您是在显示加载栏（即 45%）还是只是显示正在发生某事的屏幕？
没有进度条，这是一个简单的 div 绝对定位在画布上，带有一个微调器来指示正在发生的事情@MariM

标签： javascript jquery html canvas fabricjs

【解决方案1】：

我觉得@A wolff 是对的，你可以用

$(".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();
        });
    });

不过你也可以使用 window.setTimeout

【讨论】：

【解决方案2】：

@A.Wolff 非常接近，但似乎是时间问题？这是我的解决方案：

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();
        });
    });        
}

原始解决方案不适用于show() 的第一个参数为 0，“快速”效果更好，“慢”效果完美。

【讨论】：