Question

大家好，我知道问这是基本而愚蠢的，但是这个问题使我吃饱了。如果我有下面的以下代码。

var timerVal = 900000
function myFunction() {
  setTimeout(function(){ alert("Hello"); }, timerVal);
}
myFunction()

根据上述代码，警报将在15分钟后发出。但是十分钟后，我想通过将timerVal的值更改为1200000来将其延长5分钟。现在，警报将在另外10分钟后发出。即警报发出后总共20分钟或完成15分钟后发出。假设代码是这样的：

var timerVal = 900000
function myFunction() {
  setTimeout(function(){ alert("Hello"); }, timerVal);
}
function change(){
   setTimeout(function(){
     timerVal = 1200000;
   },60000);
}
myFunction();
change();

任何人都可以让我知道结果如何，并简要说明为什么吗？

Answer 1

一般来说，要能够“扩展”计时器，您需要取消它（使用clearTimeout），然后重新创建它。为此，您需要跟踪自最初启动以来已经经过了多长时间，并计算新的时间。

下面的代码演示了函数extendableTimeout，您可以像普通的setTimeout一样使用它，只是它返回一个带有extend函数的对象，您可以将其用于您的目的。

该演示具有2个按钮，第一个按钮启动一个动作，延迟5秒。单击扩展按钮可将超时时间再延长5秒。您可以比较点击扩展名还是不查看扩展名。

function extendableTimeout(fn, time){
    var id = setTimeout(fn, time);
    var timeStart = new Date();
    return {
       timerId: id,
       extend: function(time){
           clearTimeout(id);
           var elapsed = new Date() - timeStart;
           var newTime = time - elapsed;
           setTimeout(fn,newTime);
       }
    }
}


var myTimer;
$('#start').on("click", function(){
  console.log("Started at " + new Date());
  myTimer = extendableTimeout(() => console.log("Finished at " + new Date()), 5000);
})

$("#extend").on("click", function(){
  myTimer.extend(10000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="start">Start</button>
<button id="extend"> + 5s </button>

Answer 2

AFAIU，您不能延长setTimeout的时间。您可以做的是阻止它执行，并使用新值创建另一个setTimeout。像这样：

var timer = setTimeout(()=>console.log("first"), 2000);

clearTimeout(timer);

var timer = setTimeout(()=>console.log("second"), 2000);

您不能扩展它，因为使用创建事件时变量具有的值来创建计时器。它不是可以不时评估的参考。这是一个固定值，仅在创建时评估。

Answer 3

结果是，计时器将以900000毫秒为单位执行，尽管您尝试通过更改1200000变量的值将其更改为timerVal毫秒。

这是因为在JavaScript中，它是按值传递，并且由于您最初已传递900000，因此计时器已在900000处排队，因此无法通过更改来更改timerVal变量的值。

因此，此代码只是使timerVal指向新的数字1200000，而并没有真正更改先前设置的超时：

function change(){
   setTimeout(function(){
     timerVal = 1200000; //timerVal reference is pointing to a new number
   }, 60000);
}

要真正更改计时器的行为，您需要使用setTimeout调用返回的ID清除超时，并使用新的超时值创建另一个超时。

let timerVal = 9000;
function myFunction() {
  return setTimeout(function(){ alert("Hello"); }, timerVal); //returning the id
}
function change(id, newVal){
  clearTimeout(id); //clearing the previous timer using the id
  setTimeout(function(){ alert("Hello"); }, newVal);
}
let id = myFunction();
change(id, 5000);

setTimeout计时器值可以扩展

3 个答案: