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

Question

I have the following JavaScript code to update tiles on a page:

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

This works but any tiles updated in every iteration are updated all at once. How could I have independent timers with different intervals for each update?

Answer 1

You only have one timer: window.setTimeout(UpdateTiles, delay) , add more timers as you need i order to have multiple timers.

Why did you duplicate the code 3 times?

Use functions instead and set the timeout in each one of them.

Answer 2

Consider the following JSFiddle as a solution.

I have simplified it by using 1 function for all 3 calls and they now update at different (random) times. The key to recalling the update is the following line.

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