Javascript重置倒计时

Question

你好 我有 javascript 倒计时的问题，我写了一个脚本而且还不错。 我需要在几分钟后通过 ajax (json) 重新加载倒计时，但在加载新数据脚本后无法正常工作。 获得新计时后计时倒计时或不显示! 请帮帮我 谢谢:)

var d = today();

function today(){
    now = new Date().getTime();
    return Math.round(now/1000);
}

function countdown(time1,id)
{
    off = today() - d;
    time = time1 - off;
    h = Math.floor(time / 3600);
    m = Math.floor(time / 60) % 60;
    s = time % 60;
    t = h + ":";
    if(m < 10){ t += "0"; }
    t += m + ":";
    if (s < 10) { t += "0"; }
    t += s;
    //done
    if(m <= 0 && s <= 0){
        $("#"+id).html("00:00:00");
        return;
    }

    $("#"+id).html(t).show();
    var sto = window.setTimeout("countdown('"+time1+"','"+id+"')", 1000);
}

$(document).ready(function(){
    //clearTimeout(sto);
    countdown(1000, 'timer1');
    countdown(1200, 'timer2');

    //example (instead of json)
    setTimeout(function(){
        countdown(3000, 'timer1');
        countdown(3200, 'timer2');
        //alert('after click ok scripts is worked!');
    }, 3000)
});

Answer 1

您可以通过执行 window.clearTimeout(sto) 重置超时。

James Khoury 建议在全局命名空间中声明 var sto; 后从 sto 中删除 var 关键字。

---

下面我总结了如何在 javascript 中执行这些计时操作:

让我们从一些日期和时间操作函数开始:

// Time functions

// default unit is the millisecond
var sec = 1000;
var ms = 1;

function formatSeconds(time) {
    var seconds = Math.floor(time/1000);
    with (Math) {
        var sec = seconds % 60;
        var min = floor(seconds/60) % 60;
        var hr = floor(seconds/3600);
    }
    return hr+':'+min+':'+sec;
}

function now() {
    return (new Date()).getTime();
}

现在是真正有趣的代码:

// Timeout functions

function callPeriodically(params) {
    /* 
     * PARAMS: {callback=function, callbackInterval=int, cleanupCallback=function}
     *
     * WHAT THIS FUNCTION DOES:
     *   Calls [[callback()]] every [[callbackInterval]] milliseconds;
     *     (The [[callback()]] function should return false if it wishes 
     *     to abort callbacks.)
     *
     * RETURN VALUE: a function which, when called, will abort the periodic callbacks.
     *
     * Nomatter how periodic callbacks are aborted, the [[cleanupCallback()]] function
     * is always run last thing.
     */
    var callback = params['callback'];
    var callbackInterval = params['callbackInterval'];
    var cleanupCallback = params['cleanup'];

    var timeout = window.setTimeout(makeClock());

    var timer = function() {
        if (callback())  # stop if callback() returns false
            timeout = window.setTimeout(timer, callbackInterval);
        else if (cleanupCallback)
            cleanupCallback();
    };

    var cancel = function() {
        window.clearTimeout(timeout);
        cleanupCallback();
    }

    return cancel;
}

使用上述机制进行时钟回调:

function makeClockCallback(duration, htmlId) {
    // enclose endTime in a closure:
    var startTime = now();
    var endTime = startTime + duration;

    var countdown = function() {
        var timeLeft = endTime - now();
        $('#'+htmlId).html(formatSeconds(timeLeft));

        return timeLeft>0;  # continue as long as timeLeft>0
    };
    return countdown;
}

现在让我们测试一下:

// Demo

function makeAndRunClock(htmlId) {
    return callPeriodically({
        callback = makeClockCallback(1000*sec, htmlId), 
        callbackInterval = 1000*ms, 
        cleanupCallback = function() {
            alert(htmlId+' has been cancelled!');
        }
    );
}

var abortClock1 = makeAndRunClock(7*sec); // will naturally stop after 7sec
var abortClock2 = makeAndRunClock(10*sec); // will naturally stop after 10sec

window.setTimeout(
    function() {
        abortClock1(); // force clock1 to stop after 4sec
    },
    4*sec
);

有一些语法错误，但是你去吧。