• 关于angularjs dom渲染结束再执行的问题


    情景

    当我点击了button, div才能显示。并且我想知道这个div的高度。

    问题

    当我点击这个button以后这个。chrome就然告诉我这个div高度是0.这不是睁着眼睛说瞎话吗?怎么能如此欺骗我这个纯真少女的感情!!!

    分析

    感谢我的同事在我身边给我给我指导!
    正式点 我要开始说说问题的解决了!!!
    总结 其实是这样的当我点击了这个button以后 Angularjs还没有渲染完dom,这个时候就直接取了div的值,当然是0.

    解决这个问题先要了解Event loop!!!
    什么是event loop?

    我们知道js再一出生的时候就想将它运用于网页脚本上面,所有不能太复杂。就用单线程吧!
    单线程就意味着执行完一个任务再执行另外一个任务, 会造成很多浪费。
    于是我们将任务分成两种同步任务和异步任务。

    • 同步任务就是主线中运行的,也叫执行栈。
    • 主线任务外还存在一个任务列表,异步任务有了结果,存在任务列表。
    • 主线任务完成就会读取任务列表,执行相应的异步任务。等待结果解释,再去执行主线任务。

      任务队列中完成一个I/O任务,就会添加一个事件,表示相关任务可以进入执行栈了。主线程读取"任务队列",就是读取里面有哪些事件。
      回调函数会放在主线中调起来,当异步任务执行完后,就会执行对应的回调函数。

    主线从任务队列中读取事件,这个机制就叫event loop。

    好吧 简单点来说就是click事件已经放入任务队列中了,我们只需要再click事件放入事件队列后,再放入取高度的事件到事件队列中就可以依次实行。

    而setTimeout()就可以实现将事件插入了"任务队列"中。

    解决

    在angularjs中可以使用$timeout

    注意 $timeout 第三个参数,是否调用 apply 方法, 这是 AngularJS 性能的一个优化点。

    因此 此处用法是 $timeout( function (){ $(div).height() } , 0 , false);

    angular与event loop 执行关系

    参考

  • 相关阅读:
    毕业设计一周一记04
    毕业设计一周一记03
    毕业设计一周一记02
    毕业设计一周一记01
    课后作业
    大道至简第7,8章读后感
    课后作业和动手动脑
    大道至简-从编程到过程读后感
    数组求和与课后作业
    大道至简——失败的过程也是过程读后感
  • 原文地址:https://www.cnblogs.com/mayufo/p/5656608.html
Copyright © 2020-2023  润新知