使用setInterval调用时,JS函数不会使用当前时间进行更新

时间:2016-10-20 18:12:48

标签: javascript

我有一个时间计算器,我想每分钟更新一次。我做了一个特殊的函数来计算每个时区的时间,但是当我使用setTimeout()来调用函数manualTime();时,它似乎没有调用solveTime();对于任何变量(当我没有使用两个函数时它曾经工作)

编辑:我发现真正的原因是函数没有更新它被调用的时间。由于某种原因,它总是会返回首次加载的时间。

下面的代码

var masterTimeUTC = new Date(); //these need to be global for the solveTime to work
    var utcHours = masterTimeUTC.getUTCHours();
    var utcMinutes = masterTimeUTC.getUTCMinutes();
    var utcSeconds = masterTimeUTC.getUTCSeconds();
    var utcMinutesLead = masterTimeUTC.getUTCMinutes();

function manualTime() {
    //the main show
    var masterTimeLocal = new Date(); //this contains everything, so we can mess with it more
    var localhours = masterTimeLocal.getHours();
    var localminutes = masterTimeLocal.getMinutes();
    var localseconds = masterTimeLocal.getSeconds();
    //get all the relvant info for this stuff
    if (localminutes < 10) {
        localminutes = "0" + localminutes;
    }
    if (localseconds < 10) {
        localseconds = "0" + localseconds;
    }
    if (localhours < 10) {
        localhours = "0" + localhours;
    } //make it look nice
    //solve times based on utc codes
    solveTime(0);//utc 0
    solveTime(-7); //west
    solveTime(-6); //mountain
    solveTime(-5); //central
    solveTime(-4); //east
    solveTime(1); //uk
    solveTime(8); //perth
    solveTime(9); //adelaide
    solveTime(10); //sydney
    //use the solveTime function to solve for times. syntax is x
    // x is the utc modifier, it can be any number incl. negatives
    document.getElementById("clocksingle").innerHTML = localhours + ":" + localminutes + "." + localseconds;
    //set the big time on top.
    setTimeout(manualTime, 1000);
    //run this every second to simulate a real clock
}


function solveAll() {
    manualTime();
    solveTime(-7);
    solveTime(-6);
    solveTime(-5);
    solveTime(-4);
    solveTime(0);
    solveTime(8);
    solveTime(9);
    solveTime(10);
}
//solveTime
//this will handle everything, including am, pm, printing to div, whatever
//the div name is whatever the utc modifier is
function solveTime(x) {
    if (x < 0) {
        var shift = 24 + x;
    } else {
        var shift = x;
    }

    var suffixSolve = (utcHours + shift) % 24;
    var suffix = "am";
    if (suffixSolve > 12) {
        suffix = "pm";
    }
    if (utcMinutes == 0) {
        utcMinutesLead = "00";
    }
    if (utcMinutes < 10) {
        utcMinutesLead = "0" + utcMinutes;
    }
    var timeSolve = (((utcHours + x) + 11) % 12 + 1);
    var timeTotal = timeSolve + ":" + utcMinutesLead + " " + suffix;
    var utcMod = x;
    if (utcMod > 0) {
        utcMod = "+" + utcMod;
    }
    if (x === 0){
        document.getElementById(x).innerHTML = timeTotal;
    }
    else {
    document.getElementById(x).innerHTML = "(UTC" + utcMod + ") " + timeTotal;
    }
}

window.onload = function () {
    setTimeout(1000);
    manualTime();

}

window.onload = function () {
    setTimeout(60000);
    solveAll();
}

编辑:

我在solveTime函数中添加了一些控制台输出,它似乎每秒运行一次(感谢setTimeout),但是没有更新它解决的时间。我尝试在函数中添加new Date(),但这也无效。

EDIT2:

这不是重复,该功能称为罚款。只要再次运行,函数内部的时间就不会更新。

2 个答案:

答案 0 :(得分:2)

shapeless

答案 1 :(得分:1)

setTimeout是一个异步操作,不像同步代码那样阻止执行。

setTimeout(1000);
manualTime(); // <-- this runs immediately after, not after 1000ms

setTimeout的第一个参数是回调函数,以毫秒为单位的时间是第二个参数。在时间到期后立即调用回调函数(at the minimum

正如您在manualTime()结束时所做的那样,您应该直接在window.onload内的代码中传递回调:

setTimeout(manualTime, 1000);

solveAll也是如此。

此外,您可以将所有内容放在一个onload处理程序中,无需分离:

window.onload = function () {
  setTimeout(manualTime, 1000);
  setTimeout(solveAll, 60000);
}