0

我正在制作一个名为 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();
});
4

2 回答 2

2

据我了解，您正在尝试以$("#loadingMessage").html()您的浏览器可能无法跟上的快速速度更新 DOM。每次页面更改或调整大小时，您的浏览器都会执行一种称为重排的操作。可以这么说，渲染变化。

为了让您在每次函数完成时生成回流，您必须$.Deferred按照评论中的说明将此函数包装在对象或 webworker 中，或者创建自己的自定义回调。工作完成后，这些函数将生成回调供您选择并显示您的进度。

$.Deferred 对象的一个​​很好的包装可以在 jQuery.animate()或$.ajax(). 由于我不知道您将如何在每个步骤中验证您的 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，或者我称之为“工作”和“工作”的数量。

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 进度条：http: //jqueryui.com/progressbar/

演示：http: //jsfiddle.net/tive/b2Utn/

于 2013-05-18T06:12:10.333 回答
0

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

从

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

至

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

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

于 2013-05-18T02:47:46.153 回答