zoukankan      html  css  js  c++  java
  • setTimeout 的理解

    setTimeout,延迟一段时间执行代码。

    setTimeout(func,0),这代码的作用并不是简单地和直接调用func一个效果:

      1:动态往DOM树中插入元素,然后立刻操作这个元素(选择文本框文本,改变select的index)。

      2:因为浏览器单线程,js引擎和渲染引擎必须是顺序执行。(比如点击一个按钮,浏览器会先改变按钮的状态(重绘),然后才执行js(js引擎))

      3:所以向DOM插入元素再立刻操作这个DOM,很可能这DOM还没重绘完成,因此操作无效。

      4:所以setTimeout(func,0) 可以解决(setTimeout 会等重绘完成再执行代码。)

    ---------------以上部分是结果,下边是原理----------------------------------------------------------------------

      深入思考:

      5:setTimeout(func,0)是延迟0ms执行,也就是立即执行,为什么还是在重绘之后呢。重绘肯定超过0ms啊。

      6:因为Javascript的单线程异步模式。

      7:参考John Resig 的 《how javascript Timers work

    -------------------以下是对此文章理解-----------------------------------------------------------------------------

      

    --蓝色的为js块。

    --右边的数字是事件。

    --左边数字是时间轴。

    --问题是浏览器的判断。

    步骤解析:

      1:第一个js块中,两个10ms的timer被初始化(一个setTimeout 一个setInterval),鼠标点击了(鼠标点击事件的事件处理函数也要排队等第一个js块执行完再处理),

      2:第一个js块执行完,浏览器问谁在等执行?(鼠标点击事件和timer)

      3:执行鼠标点击事件,timer继续等待。

      4:在执行鼠标点击事件时,10ms的interval触发了(毫无例外的继续排队,想立即执行不存在的)

      5:事件处理函数执行完毕,timer开始执行,这时候interval 又触发了。。(这次的interval被抛弃了dropped)

      6:timer执行完毕,第一个interval执行,然后第三个interval触发,在其自身执行过程中,自身也可以被触发。

      7:最后没什么排队的,所有interval立刻执行。

    然后setTimeout 和 setInterval的区别

    1 setTimeout(function(){
    2    setTimeout(arguments.callee,10);
    3 },10);
    4 
    5 setInterval(function(){
    6 },10);

    这两个代码看着效果一样,其实区别很大。setTimeout总是会在其回调函数执行后延迟10ms(或者更多,不会更少)。但是setInterval总是10ms执行一次而不管它的回调函数执行多久。

    如果intervals的回调执行时间比你给的delay还要长,那么他们会连在一起执行。

    ----------------------------------下边说说settimeout中的this---------------------------------------------------

    setTimeout的this被指向全局作用域

    1 var 0 = {
    2   a:"a",
    3   b: function(){
    4       setTimeout(function(){
    5          console.log(this.a);  
    6       },1000);
    7   }
    8 }
    9 o.b();// undefined

    解决办法是:

    1 var o={
    2    a:"a",
    3    b:function(){
    4        var that = this;
    5        setTimeout(function(){
    6             console.log(that.a);
    7        },1000);
    8    }
    9 }
  • 相关阅读:
    new对象数组时的内存布局
    写程序取自己进程的AEP
    类虚函数表原理实现分析(当我们将虚表地址[n]中的函数替换,那么虚函数的实现就由我们来控制了)
    测试 __try, __finally, __except(被__finally捕获的异常, 还会被上一级的__except捕获。反之不行)
    围观M$的new
    将258.369 double值转为内存表示(科学计数法)
    Broadcast Reveiver作用
    DEBUG模式下, 内存中的变量地址分析
    不包含SDK头文件, 补全API定义
    俄罗斯方块SDK版
  • 原文地址:https://www.cnblogs.com/ming-os9/p/8953310.html
Copyright © 2011-2022 走看看