Question

我正在计算自我的程序中按下Move按钮后的秒数。我已经声明了一个名为startTime的全局变量，并忽略了设置它的值，直到按下Move按钮。在此之后，我将值设置为0，我的程序将移至我的moveBall()函数。在此函数中，我声明：startTime = setInterval(function(){startTime + 1;}, 1000);然后将值从0重置为新值startTime。点击Stop按钮后clearInterval(startTime);。

我的问题是，如果我停止程序然后再次启动程序，我的startTime值永远不会重置为0。即使我宣布setInterval每1000毫秒应该是一秒钟。 startTime值似乎每毫秒增加1。

以下是我的相关代码部分，当我点击了ID为move的按钮时：

$('#move').on('click', function(){
    //Reset the startTime to 0 everytime Move is pressed
    startTime = 0;
    $('#time').html(startTime);

    startGame = setInterval(function(){ moveBall();}, 20);
    //disable the 'move' button
    $(this).prop('disabled', true);
    //disable the 'Change Settings' button
    $('#change').prop('disabled', true);
});

按下标识为stop的按钮时：

  $('#stop').on('click', function(){
    clearInterval(startGame);
    clearInterval(startTime);
    //enable the 'move' button
    $('#move').prop('disabled', false);
    //enable the 'Change Settings' button
    $('#change').prop('disabled', false);
});

这是我的moveBall功能：

function moveBall(){
    //Starting the timer since moveBall() has begun
    startTime = setInterval(function(){ startTime + 1;}, 1000);
    $('#time').html(startTime);

    //read current top position
    var currentTop = parseInt($('#ball').css('top'));
    //read current left position
    var currentLeft = parseInt($('#ball').css('left'));

    /*If the top boundry of the ball is on or outside of the top border
        of the base then change the direction */
    if(currentTop + ball_radiusV > max_height || currentTop < 0){
        vx *= -1; //multiply dx by -1
    }

    /* If the right boundry of the ball is on or outside of the right border
        of the base then change the direction */
    if(currentLeft + ball_radiusH > max_width || currentLeft < 0){
        hx *= -1; //multiply dx by -1
    }

    //define new position 
    var newtop = currentTop + vx;
    var newLeft = currentLeft + hx;
    //change current position
    $('#ball').css('top', newtop + 'px');
    $('#ball').css('left', newLeft + 'px');
}

Answer 1

我认为你混淆了setInterval的返回值。

setInterval返回调度函数的句柄，因此可以调用clearInterval（）。

来自Mdn： https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

Syntax
var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
var intervalID = window.setInterval(code, delay);
intervalID is a unique interval ID you can pass to clearInterval().

如果你在那个函数中调用startTime + 1，会发生什么？没有返回，startTime没有被改变，只是被评估并且函数退出。

计算秒数过去，每秒调用一个函数并添加1是一种过度杀伤，它可能也不准确。

尝试这样做：

when start button is pressed:
startTime = new Date().getTime();

按下停止按钮时：

millisecondsPassed = new Date().getTime() - startTime;
secondsPassed = Math.floor(millisecondPassed / 1000);

如果该功能的唯一含义是增加时间，则根本不需要调用它，不需要间隔清除。

Answer 2

setInterval返回对刚刚创建的间隔的引用，以便稍后您可以停止间隔。

var myRef = setInterval(...);
clearInterval(myRef);

每次调用moveBall()并运行此

startTime = setInterval(function(){ startTime + 1;}, 1000);
$('#time').html(startTime);

您正在创建一个新间隔并输出它的参考。在大多数浏览器中，这是一个从1开始的简单计数器。如果您打算稍后使用，则不应修改startTime值，因为您将丢失对间隔计时器的参考值。

按下按钮后的秒数。间隔不正确，值未重置

2 个答案: