js 定时器(setTimeout/setInterval)出现变量未定义(xxx is not defined) 的解决方法

首先声明本人资质尚浅,如有错误,欢迎指正、共同提高。

-----------------------------------------------------------------------------------

首先声明:本文不重点讨论this作用域,而是讨论普通变量在定时器中容易报错的情况;

 

setTimeout的基本用法不再重述,

详见:http://www.w3school.com.cn/htmldom/met_win_settimeout.asp

 

bug:

  setTimeout的第一个参数有两种形式: 

  1) 字符串code;  

  function test (){

    var a=1;

    setTimeout("a++",100);//a is not defined;

  }

  test();

 

  2) 函数形式;

  function test (){

    var a=1;

    setTimeout(function(){

      a++;

      console.log(a); //正常运行,却打印出结果2;

    },100);

  }

  test();

 

为什么第一种情况容易出错呢?

我们知道,setTimeout方法是挂在window对象下的。《JavaScript高级程序设计》第二版中,写到:“超时调用的代码都是在全局作用域中执行的,因此函数中this的值在非严格模式下指向window对象,在严格模式下是undefined”。在这里,我们只讨论非严格模式。

因而对于第一种形式(string code)的情况,定时器汇总调用的是全局变量a,而上下文中定义的变量是局部变量,所以会报错;

对于第二种形式(函数形式)可以这么理解:在这里匿名函数的使用形成了一个闭包,从而能访问到外层函数的局部变量。只是这种闭包,跟常见的闭包不同,因为函数式放在setTimeout里面。

 

 

-------------------------------------------------------------------------------

如有错误,欢迎评论指正、共同提高。[握手]    

欢迎转载,转载请注明:转载自[ http://www.cnblogs.com/juneling ]

posted @ 2018-04-25 17:30  Juine  阅读(10366)  评论(0编辑  收藏  举报