javascript - 延长 setTimeout 计时器的超时持续时间

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

结果将是计时器将在 900000 毫秒标记处执行，尽管您已尝试通过更改 的值将其更改为 1200000 毫秒code>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);