JavaScript学习之setTimeout

《JavaScript权威指南》第四版中说“window对象方法setTimeout()用来安排一个JavaScript的代码段在将来的某个指定时间运行”。

setTimeout(foo,i); // foo是回调函数,i是延时时间

注意“将来”一词,setTime会把foo函数放到队列中,当线程空闲的时候,JavaScript才会去执行队列里的事件。

看下面的代码:

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript">

      window.onload = function () {
        var a = 0;
      function one() {
        for (var i = 0; i < 10; i++) {
          console.log(i);
          setTimeout(function(){
            console.log(a);
            a += i;

          },0);
        };

      }
      function two() {
        alert(a);
      }
        one();
        setTimeout(two,0);
      }
    </script>
  </head>
</html>

这里其实one函数看着像是会正常把a从0加到9,然后alert出来。

但实际上的alert结果是100,为什么?

one函数的for循环是不会因为setTimeout停下的,它遇到setTimeout的时候只会把里面的回调函数放到队列里面去,然后继续i++。等执行完所有的for循环才会去执行刚才放到队列的函数。因为循环完了所以i是10,总共有10个相同的a+=i;操作的函数被调用,最后a的结果就变成了100了。

但是其实上面代码有部分我还是不明白,就是如果setTimeout(two,0);改成setTimeout(two(),0);的话,alert的结果就变成了0。

setTimeout的第一个参数是函数对象,如果变成two(),那回调函数就变成了two的返回值。

时间: 2024-11-02 23:27:30

JavaScript学习之setTimeout的相关文章

JavaScript学习之 倒计时

倒计时很常见,例如离XX活动还有XX天XX小时XX分XX秒,然后逐秒减少,实现很简单,我只是想记录这过程中的一点小坑. 先上代码: <html> <head> <meta charset="UTF-8" > <title>task0002_2</title> </head> <body> <input id="input-date" type="text"

JavaScript学习之DIV层与图像

DIV层与图像 一.设计一个可定位的层 1.设置位置(position)和大小 (1)绝对定位(absolute):以页面边框为参照,只要设置好绝对位置,那么元素的位置会始终固定在距离边框某个位置的距离. 绝对定位有两个属性:left和top,分别是距离网页左边和网页顶部的绝对位置,可借助style属性直接设置: style="position:absolute;left:距离左边距离;top:距离顶部距离" (2)相对定位(relative):需要有一个参照元素,设置好相对位置和参照

JavaScript学习05 定时器

JavaScript学习05 定时器 定时器1 用以指定在一段特定的时间后执行某段程序. setTimeout(): 格式:[定时器对象名=] setTimeout(“<表达式>”,毫秒) 功能:执行<表达式>一次. 例子: <!DOCTYPE html> <html> <head> <title>timer1.html</title> <meta http-equiv="keywords" co

Javascript学习--------认识window窗口对象

window对象: Window 对象表示浏览器中打开的窗口. 可以通过window对象设置窗口的大小,位置等. 还可以控制是否加载网页等. window对象集合: 集合 描述 frames[] 返回窗口中所有命名的框架. 该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架或 <iframe>.属性 frames.length 存放数组 frames[] 中含有的元素个数.注意,frames[] 数组中引用的框架可能还包括框架,它们自己也具有 frames[] 数

JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

JavaScript学习总结(一)--延迟对象.跨域.模板引擎.弹出层.AJAX示例 目录 一.AJAX示例 1.1.优点 1.2.缺点 1.3.jQuery AJAX示例 二.延迟对象(Deferred) 2.1.回调函数 2.2.deferred.done 三.跨域 3.1.什么是跨域 3.2.JSONP跨域 3.3.jQuery使用JSONP跨域 3.4.跨域资源共享(CORS) 3.5.小结 四.弹出层 五.模板引擎 5.1.Hello World 5.2.方法 5.3.与AJAX结合应

JavaScript学习之窗口

窗口 一.Window 对象 Window 对象表示浏览器中打开的窗口.如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象. 1.对象属性 2.对象方法 二.打开窗口和关闭窗口 (一)打开窗口 1.使用open()方法打开新窗口 语法: window.open("新窗口地址","新窗口名称","新窗口属性串"); 2.open()方法常见属

javascript学习笔记之时间定制器

时间间隔定制器 单次定制 setTimeout() 函数 setTimeout("操作",时间); eg:setTimeout("alert('五分钟后显示',5*60*1000); 多次定制 setIntervar()函数 setIntervar("操作",间隔时间); eg:setIntervar("alert('每间隔五分钟显示',5*60*1000); javascript学习笔记之时间定制器

javascript学习

javascript 学习 title: Javascripttags: javascript,学习grammar_cjkRuby: true--- 定义变量 三种形式 var name; var name = "zhang san"; var name; name = "zhang san"; Javascript 的数据类型 6种数据类型 字符串单引号或双引号 var name = "zhang san"; var name = 'zhang

Javascript 学习笔记 2: 标识语句

可以在任何语句声明之前使用唯一标识(identifier)和冒号(:)用来标记该语句: identifier: statement 这样,你可以在程序的任何其他地方通过标识来使用这个语句.即使在语句内部也可以使用该语句的标识(例如:循环语句和条件语句).当在一个循环语句前添加一个标识,你可以在语句内部通过break 标识来退出当前循环,也可以通过continue标识来继续执行该语句.例如: mainloop: while(token != null) { // Code omitted... c