javascript - 单个 HTML 页面上的多个计时器

Question

我有以下 JavaScript 代码来更新页面上的图 block :

var delayMinimum = 1000;
var delayMaximum = 5000;

function UpdateTiles()
{
    var width = 0;
    var delay = 0;
    var percent = 0;
    var divNameLabel = "";
    var divNameValue = "";
    var divNameProgress = "";

    if (Math.floor((Math.random() * 100) + 1) > 30)
    {
        percent = Math.floor((Math.random() * 100) + 1);
        width = Math.floor(80 * percent / 100);
        divNameLabel = "DivDashboardTileTemplatesLabel";
        divNameValue = "DivDashboardTileTemplatesValue";
        divNameProgress = "DivDashboardTileTemplatesProgress";
        document.getElementById(divNameValue).innerText = percent.toString() + "%";
        $("div#" + divNameProgress).animate({ width: (width.toString() + "px"), }, delayMinimum);
    }

    if (Math.floor((Math.random() * 100) + 1) > 30)
    {
        percent = Math.floor((Math.random() * 100) + 1);
        width = Math.floor(80 * percent / 100);
        divNameLabel = "DivDashboardTileDocumentsLabel";
        divNameValue = "DivDashboardTileDocumentsValue";
        divNameProgress = "DivDashboardTileDocumentsProgress";
        document.getElementById(divNameValue).innerText = percent.toString() + "%";
        $("div#" + divNameProgress).animate({ width: (width.toString() + "px"), }, delayMinimum);
    }

    if (Math.floor((Math.random() * 100) + 1) > 30)
    {
        percent = Math.floor((Math.random() * 100) + 1);
        width = Math.floor(80 * percent / 100);
        divNameLabel = "DivDashboardTileFormsLabel";
        divNameValue = "DivDashboardTileFormsValue";
        divNameProgress = "DivDashboardTileFormsProgress";
        document.getElementById(divNameValue).innerText = percent.toString() + "%";
        $("div#" + divNameProgress).animate({ width: (width.toString() + "px"), }, delayMinimum);
    }

    delay = Math.floor((Math.random() * (delayMaximum - delayMinimum)) + delayMinimum);
    window.setTimeout(UpdateTiles, delay);
}

$(document).ready(UpdateTiles);

这可行，但每次迭代中更新的任何图 block 都会立即更新。我怎样才能为每次更新设置不同间隔的独立计时器？

Answer 1

考虑以下JSFiddle作为解决方案。

我通过对所有 3 个调用使用 1 个函数来简化它，并且它们现在在不同(随机)时间更新。调用更新的关键是以下行。

setTimeout(function () {updateTileSet(label,value,progress)}, delay);