Question

我正在制作一个名为showLoadProgress（）的快速javascript进度函数。它在示例代码中看到的buildMyPage（）函数中重复调用，直到函数完成。

如果我正在运行调试器，在断点处我可以看到“#loadingMessage”元素的内容正在按预期更新。

但是当调试器没有运行时，我看不到对“#loadingMessage”元素内容的更改。内容保持不变。

我该如何纠正？

提前致谢所有信息。

function showLoadProgress(currentActionDuringLoad, totalActionsForLoad)
{
    var percent = Math.round((currentActionDuringLoad / totalActionsForLoad) * 100);
    var percentString = percent + "%";
    $("#loadingMessage").html(percentString);
}

$(document).ready(function()
{ 
    buildMyPage();
});

Answer 1

根据我的理解，您正在尝试更新DOM $("#loadingMessage").html()，以防止您的浏览器无法遵循的快速速度。每次页面被更改或调整大小时，浏览器都会执行一些名为reflow的操作。可以这样说出改变。

为了在每次函数完成时生成重排，您必须将此函数包装在注释中所述的$.Deferred对象或webworker中，或者创建自己的自定义回调。完成工作后，这些功能将生成回调，供您选择并显示您的进度。

可以在jQuery .animate()或$.ajax()中找到$ .Deferred对象的好包装器。由于我不知道如何在每个步骤验证您的loadingProgress，我将.animate()与.progressbar()小部件和自定义回调结合起来，您可以稍后修改。

伪造你的行为jQuery的$ .Deferred包装器，用于页面加载，例如document.ready和window.load，非常完美。在此时间范围之间，我可以加载进度条并使用.animate()生成回流。我将在这里展示基础知识并创建一个jsfiddle来查看它的实际效果。我可以想到一个填充了URL的数组来加载带有ajax的外部脚本。

简而言之，执行以下操作：

// once the dom is ready
$(function () {
    bar = $(".progressbar");
    buildMyProgressbar.init();
    buildMyPage.init();
});

// once the page is loaded
$(window).load(function () {
    buildMyProgressbar.stop();
});

当进度条初始化时，使用.animate()的进度量。我将传递一个pageload，这只不过是一个进度步骤的数字ID或我称之为＆＃34; job＆＃34;以及＆＃34;工作＆＃34;。

的数量

animation: function (pageload) {
    $({
        job: pageload.fakeJob // starts at 1
    }).animate({
        job: pageload.fakeJobs // end at jobs.length
    }, {
        duration: 1000,
        step: function () {
            var percent = Math.round((this.job / pageload.fakeJobs) * 100),
                percentString = percent + "%";

            // verify your job is loaded
            if (buildMyPage.isJobLoaded(this.job)){
                bar.children().eq(0).css({ width: percent + "%" }).text("loading: " + percent);
            }
        },
        complete: function(){
            bar.children().eq(0).text("complete");
        }
    });
}

jQuery UI Progressbar：http://jqueryui.com/progressbar/

DEMO： http://jsfiddle.net/tive/b2Utn/

Answer 2

您可以使用setTimeout()代替简单循环，让浏览器有机会更新视图。

这

while (...) {
    // do something
}

到

var doSomething = function() {
    // do something
    setTimeout(doSomething, 10); 
};
doSomething();

此外，如果需要很长时间才能执行，可以使用WebWorkers。

jQuery $（“＃id”）。html（）的结果在文档就绪功能期间不可见？

2 个答案: