Question

我正在尝试创建一个倒计时网站，该网站会一个接一个地执行一系列计划作为倒计时。每个计划都是一对字符串的数组，表示每个计划的开始时间和结束时间。

预期行为：

我希望第二个计划在第一个计划结束时开始。

当前行为：

完成第一个计划后，网页上显示的日期会显示所有值的DTC= DecisionTreeClassifier() DTC.fit(X_train,y_train) DTC.predict(pandas.DataFrame([a])) res=DTC.predict_proba([a]) new=list(chain.from_iterable(res)) index=sorted(range(len(new)), key=lambda i: new[i], reverse=True)[ value=[] for i in index: value.append(event[i]) return render_template('output.html',value=value)。

请帮我理解我做错了什么，因为我是编程新手。

Codepen of Minimum Complete Verifiable Example [您可能需要更改日程安排的开始时间和结束时间，具体取决于您何时打开它以重现问题]

代码示例：

NaN

Answer 1

我认为问题主要出在两个方面：

for循环只运行一次，因此第二个调度在第一个调度结束后永远不会启动（for循环显然已经完成执行并且不再启动）。理想情况下，一旦第一个计划结束，该循环应该再次运行。
清除超时的功能应该在DOM更新之前移动，因为当计划结束时函数getTimeRemaining可能会返回不一致的值。

解决方案：

将计划开始代码包含在函数startNewScheduleIfNeeded中，并在每次计划结束时运行该新函数并清除计时器
移动检查以查看是否应在updateClock中清除DOM更新上方的计时器以避免NaN值

示例代码：

function getTimeRemaining(endtime) {
    var t = Date.parse(endtime) - Date.parse(new Date());
    var seconds = Math.floor((t / 1000) % 60);
    var minutes = Math.floor((t / 1000 / 60) % 60);
    var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    var days = Math.floor(t / (1000 * 60 * 60 * 24));
    return {
        total: t,
        days: days,
        hours: hours,
        minutes: minutes,
        seconds: seconds
    };
}

function initializeClock(id, endtime) {
    var clock = document.getElementById(id);
    clock.style.display = "block";
    var daysSpan = clock.querySelector(".days");
    var hoursSpan = clock.querySelector(".hours");
    var minutesSpan = clock.querySelector(".minutes");
    var secondsSpan = clock.querySelector(".seconds");

    function updateClock() {
        var t = getTimeRemaining(endtime);
        // Solution Part 2: Move check before DOM update and return early if needed
        if (t.total <= 0) {
            clearInterval(timeinterval);
            // Schedule has ended, run function to start another if needed.
            startNewScheduleIfNeeded();
            return;
        }
        daysSpan.innerHTML = t.days;
        hoursSpan.innerHTML = ("0" + t.hours).slice(-2);
        minutesSpan.innerHTML = ("0" + t.minutes).slice(-2);
        secondsSpan.innerHTML = ("0" + t.seconds).slice(-2);
    }

    updateClock();
    var timeinterval = setInterval(updateClock, 1000);
}

// var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
//initializeClock('clockdiv', schedule);

// Solution Part 1: Wrap schedule start in a function to resuse when schedules end
function startNewScheduleIfNeeded() {
    var schedule = [
        ["2018-05-03", "2018-05-03 11:17:00"],
        ["2018-05-03 11:17:00", "2018-05-09"]
    ];

    // iterate over each element in the schedule
    for (var i = 0; i < schedule.length; i++) {
        var startDate = schedule[i][0];
        var endDate = schedule[i][1];

        // put dates in milliseconds for easy comparisons
        var startMs = Date.parse(startDate);
        var endMs = Date.parse(endDate);
        var currentMs = Date.parse(new Date());

        // if current date is between start and end dates, display clock
        if (endMs > currentMs && currentMs >= startMs) {
            initializeClock("clockdiv", endDate);
        }
    }
}
startNewScheduleIfNeeded();

其他观察：

随机拨打initializeClock，我已将其评论
如果您的输入是字符串（例如您的日程表列表），则只需使用Date.parse。调用Date.parse(new Date())是多余的。您可以使用new Date()。此外，Date.parse不返回整数（毫秒）。它会返回一个Date对象，当您进行<
一个计划的结束时间必须等于下一个计划中的开始时间才能使用此方法。如果你有间隙（甚至一秒钟），启动计划的功能将在检查之前执行，以查看当前时间是否在开始时间和结束时间之间可以通过。（在您问题的示例中，第一个计划的结束时间为'2018-05-02 13:36:00'，下一个计划的结束时间为'2018-05-02 13:36:01'。这不起作用 - 第二个计划的开始时间必须为'2018-05-02 13:36:00'）。

在Javascript中一个接一个地运行倒计时器

1 个答案: