两个计时器的同步(设置间隔）

Synchronization of two timers (setInterval)

本文关键字：设置 同步 计时器 两个      更新时间：2023-09-26

我正在使用一个脚本，其中包含一个需要每 10 分钟调用一次的函数。此外，为了告知用户在重新加载函数之前还剩多少时间（通过 AJAX，但现在这无关紧要），我放了一个小的回归计时器。

这是主要结构：

$(document).ready(function () {
    // Test's function
    function loadDate() {
        var myDate = new Date();
        $("#dateload").html(myDate);
    };
    // Startup Variables
    countermin = 10; // 10 minutes
    countersec = 60;
    minpass = 0;
    secpass = 0
    // Showing info before timer.
    $("#reloadtime").html("Function will be reloaded in " + countermin + "m<b>" + (60 - countersec) + "</b>s<br/>(countersec's value: " + countersec + " - secpass' value: " + secpass + ")");
    $("#timescalled").text("The date function has been called " + minpass + " times  after page's load.");
    loadDate();

    // FIRST setInterval
    // It's our timer.
    intvl1 = setInterval(function () {
        if (countersec++ == 60) {
            countermin--;
            countersec = 1;
        }
        if (countermin < 0) {
            countermin = 9;
            countersec = 1;
            secpass = 0;
        }
        secpass++;
        $("#reloadtime").html("Function will be reloaded in " + countermin + "m<b>" + (60 - countersec) + "</b>s<br/>(countersec's value: " + countersec + " - secpass' value: " + secpass + ")");
    }, 1000);
    // SECOND setInterval
    // Counting 10 minutes to execute the function again (and again...).        
    intvl2 = setInterval(function () {
        minpass++;
        $("#minpass").text("The date function has been called " + minpass + " times after page's load.");
        loadDate();
    }, 600000);
});

我的问题是：两个计时器不同步。intvl2正在执行函数，并在计时器（intvl1）达到0之前返回。错误约为 20 秒，每 10 分钟后增加一次。

如果您与开始时打印的时间进行比较，大约 6、7 分钟的执行时间，与 PC 的时钟相比，您可以看到时间的差异。

如何让它们同步？

你可以检查这个小提琴。

更简单的

方法是使用单个计时器来执行这两项操作，更新倒计时信息并触发事件。下面是一个示例：

var oneSecond = 1000;
var counter = 0;
var eventInterval = 5 * oneSecond;
var timesTriggered = 0;
setInterval(function () {
    counter = (counter + oneSecond) % eventInterval;
    $('.countdown').text((eventInterval - counter) / oneSecond);
    if(counter == 0){
        timesTriggered++;
        $('.timesTriggered').text(timesTriggered);
    }
}, oneSecond);

工作小提琴：http://jsfiddle.net/TFDSU/3/

我已经用

你的代码进行了一些破解 - 我不能坐下来倒计时 10 分钟:)所以我把它切换到一分钟和其他一些变化，但这工作正常，不会浪费时间。

$(document).ready(function () {
// Function of Test
function loadDate() {
    var myDate = new Date();
    $("#dateload").html(myDate);
};
countersec = 60; //
minpass = 0;
$("#reloadtime").html("Function will be reloaded in "+countersec+"</b>s<br/>");
$("#timescalled").text("The date function has been called " + minpass + " times after page's load.");
loadDate();
intvl1 = setInterval(function () {
    countersec--;
    if (!countersec) { countersec=60; }
    $("#reloadtime").html("Function will be reloaded in "+countersec+"</b>");
}, 1000);
intvl2 = setInterval(function () {
    minpass++;
    $("#minpass").text("The date function has been called " + minpass + " times after page's load.");
    loadDate();
}, 60000);
});
相关文章：