使用函数时的 setInterval 闭包问题

Question

为什么case1只运行一次？为什么 var cnt (global) 在 case2 中不递增？

var cnt = 0;

var case1 =document.getElementById('case1');

var a = setInterval(myFunction(cnt),1000);
   
function myFunction(cnt){
   console.log('case1',cnt);
   cnt++;
   case1.innerHTML = cnt;
   }
   
var case2 =document.getElementById('case2');

var b = setInterval(function(){myFunction2(cnt)},1000);
function myFunction2(cnt){
   console.log('case2',cnt);
   cnt++;
   case2.innerHTML = cnt;
   }
   
/*   
var case3 =document.getElementById('case3');

var c = setInterval(function(){myFunction3()},1000);
function myFunction3(){
   console.log('case3',cnt);
   cnt++;
   case3.innerHTML = cnt;
   }
   */

<div id='case1'></div>

<div id='case2'></div>

<div id='case3'></div>

Answer 1

为什么case1只运行一次？

setInterval 函数需要一个函数对象作为第一个参数。您提供的参数 (myFunction(cnt)) 是 myFunction 的执行，它 returns undefined。当该函数只执行一次时，它会在控制台中显示 case1。 setInterval函数这里确实没有输入函数重复执行

为什么 var cnt (global) 在 case2 中不递增

您在 myFunction2 中递增的 cnt 变量实际上是提供给它的参数。所以，它掩盖了全局变量。

查看我所做的更正。

在案例 1 中，我删除了函数执行并重复运行s。

在案例 2 中，我重命名了参数 - 因此，阴影被删除了。

var cnt = 0;

var case1 =document.getElementById('case1');

var a = setInterval(myFunction,1000);
   
function myFunction(){
   console.log('case1');
   cnt++;
   case1.innerHTML = cnt;
   }
   
var case2 =document.getElementById('case2');

var b = setInterval(function(){myFunction2(cnt)},1000);
function myFunction2(cnt1){
   console.log('case2',cnt1);
   cnt1++;
   case2.innerHTML = cnt1;
   }
   
/*   
var case3 =document.getElementById('case3');

var c = setInterval(function(){myFunction3()},1000);
function myFunction3(){
   console.log('case3',cnt);
   cnt++;
   case3.innerHTML = cnt;
   }
   */

<div id='case1'></div>

<div id='case2'></div>

<div id='case3'></div>

使用函数时的 setInterval 闭包问题

setInterval closure issue when using functions

javascript

closures

setinterval