0

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機能を実行し、タイマー ( ) が 0 になる前に戻りintvl1ます。エラーは約 20 秒で、10 分ごとに増加します。

実行開始から6、7分あたりに表示されている時間と比べてみると、PCの時計と比べると時間の差がわかります。

どうすればそれらを同期させることができますか?

このフィドルを確認できます。

4

2 に答える 2

5

より単純なアプローチは、両方のことを行い、カウントダウン情報を更新し、イベントをトリガーする単一のタイマーを使用することです。以下に例を示します。

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/

于 2013-10-02T11:57:18.313 に答える
0

私はあなたのコードを少しハックしました - 私は10分のカウントダウンに座ることができません:)それで私はそれを1分に切り替え、他のいくつかの変更を加えましたが、これはうまく機能し、時間を失うことはありません..

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

});
于 2013-10-02T12:39:51.280 に答える