JavaScript中赋值给变量的setInterval是如何被触发执行的?
你产生误解的核心是混淆了函数引用赋值和函数调用后返回值赋值的差异,具体解释如下:
- 首先,
setInterval是浏览器原生提供的定时器API,你写的setInterval(changeColour, 3000)带了参数括号,本质是立刻调用这个方法,只要JS引擎解析到这行代码就会立即执行,和你调用自己写的changeColour()是完全相同的逻辑。 - 你把返回值赋值给
myTimer的操作,和setInterval是否执行没有关系:setInterval执行后会返回一个数字类型的唯一定时器ID,你存储这个ID只是为了后续需要停止定时器时,能传给clearInterval定位到对应的定时器进行销毁。 - 如果想要实现「把定时器的启动逻辑存到变量里,手动调用才执行」,你需要把
setInterval的调用包在一个匿名函数里再赋值,写法参考:
// 此时只是把函数引用存到变量,不会执行定时器 let myTimer = function() { return setInterval(changeColour, 3000); } // 主动调用后才会启动定时器,同时拿到定时器ID const timerId = myTimer();
你可以通过下面这个最简示例理解二者的区别:
// 情况1:只赋值函数引用,不执行 const testFn = () => console.log('执行了'); // 此时控制台不会有输出 // 情况2:调用函数,把返回值赋值给变量 const res = testFn(); // 此时控制台立刻输出「执行了」,res是该函数的返回值undefined
你写的代码属于第二种情况,自然会立刻触发setInterval的执行。
内容的提问来源于stack exchange,提问作者martin958
相关产品推荐
相关产品推荐

