情景再现
function A(){
setTimeout(B(1,2),5000)
}
function B(a,b){
const c= a+b;
console.log(c)
A();
}
以上代码出现的结果就是:不停的会打印处c的值,而不像想象的每隔5s打印一次
解释
- setTimeout的第一个参数要求的是一个函数的定义。
- 函数的定义:function(a,b){},请注意!!B(a,b)像这样一旦传了参数说明这已经是函数的执行,因此,直接将B(a,b)扔进setTimeout做第一个参数,一定是错的
- 这就所谓的将函数的执行当做函数的定义了
- 因此对于需要填写函数定义的地方,就必须注意了,对于那些带有参数的函数,传递就要注意
当你只想传递函数的定义,但是又需要传递参数的时候就需要使用一个function去包住真正要被执行的函数,然后也可以吧参数传递进去
解决办法
1.使用function包住带有参数的函数
setTimeout(function(){B(1,2)},5000)
//或者
setTimeout(()=>{B(1,2),5000)}
2.使用setTimeout的其他参数传递
setTimeout(B,5000,a,b)
从设置时间的参数之后一次将B所需要的参数写入
反思
- 还记得在react的时候,给某个标签设置点击/提交函数的时候
<button onclick={this.handleClick(3,4).bind(this)}/>
//这样写是绝对不行的应该写成一下两种方式
<button onclick={this.handleClick.bind(this,3,4)}/>
//或者
<button onclick={()=>{this.handleClick(3,4);}}/>
//一般采用第二种方式比较多,因为箭头函数会将自己所知道的this传递给函数内部就不需要bind(this)