运行循环前的预加载器

Question

我有以下代码：

$('.tudo').on('click', function (e) {               
                    myApp.showPreloader();


                    sessionStorage.clicados = "[]";
                    var clicados = [];                  

                    var visiveis  = $('.thumbnail').filter(':visible'); 

                    for(var i=0; i<visiveis.length;i++){

                        var url_img = $(visiveis[i]).attr('data-url');
                        var tipo = $(visiveis[i]).attr('data-tipo');
                        var idvideo = $(visiveis[i]).attr('data-idvideo');

                        clicados.push({
                            url_img: url_img,
                            tipo: tipo,
                            idvideo: idvideo
                        });                             
                    }


                    $(visiveis).find('img').addClass('thumb-selecionado');
                    sessionStorage.clicados = JSON.stringify(clicados);


                    var thumb_selecionados = $('.thumb-selecionado').length;
                    $('.contador').html(thumb_selecionados);

                    myApp.hidePreloader();
                });

我的代码运行一个从 .thumbnail class 获取属性并以 JSON 格式

将它们保存在 sessionStorage 中的循环

但是，看看myApp.showPreloader()。此函数在屏幕上显示了一个预加载器，但出于任何原因，仅在循环结束时才工作，即函数冻结和运行它应该结束时。

我如何运行循环开始前的预加载器功能没有冻结？

谢谢

Answer 1

showPreloader 所做的更改在线程退出之前不会出现，这是因为系统没有机会更新显示。

您可以改为调用 showPreloader，然后在 setTimeout

中执行冗长的操作

https://jsfiddle.net/spuox3nu/2/

$(function(){
  $('#a').text('Please wait...');
  setTimeout(function(){
    //This takes a long time
    for(var i=0;i<1e9;i++){}
    $('#a').text('Finished, thank you for your patience.');  
  },0)
})

myApp.showPreloader(); 之后的所有内容都进入 setTimeout 函数。

运行循环前的预加载器

Run a preloader before loop

javascript

jquery

html-framework-7

运行 循环前的预加载器

Run a preloader before loop

javascript

jquery

html-framework-7

运行循环前的预加载器