目录

使用$nextTick

使用setTimeout

语法

提示和注释

JavaScirpt线程

原理

为什么会失败

---

使用$nextTick

方法1

其中this.$nextTick是页面渲染完成后的回调函数，当页面渲染完成再进行获取宽高等就比较准确了，但是还是有问题的，如果没用看方法2

this.$nextTick(() => {
       this.itemHeight = this.$refs.item.$el.offsetHeight // 100
     })

使用setTimeout

方法2

 这边是用一个setTimeout实现的，其作用是在其他操作执行完毕后才会执行其中的代码，如果有延时的话还会先延时。具体看下面的解释

setTimeout(() => {
      this.itemHeight = this.$refs.item.$el.offsetHeight 
    }, 200)

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

语法

setTimeout(code,millisec)

参数	描述
code	必需。要调用的函数后要执行的 JavaScript 代码串。
millisec	必需。在执行代码前需等待的毫秒数。

提示和注释

提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

以上定义来源于w3school.com

JavaScirpt线程

先了解下浏览器，浏览器是多线程的。

1. JavaScript引擎线程
2. 界面渲染线程
3. 浏览器事件触发线程
4. Http请求线程

JS运行在浏览器中，是单线程的，每个window一个JS引擎线程。既然是单线程的，的在某个特定的时刻只有特定代码能被执够行，并阻塞其它的代码。（至于ajax的实现这里就不说了。）

原理

 来了解下setTimeout的简单的原理：

setTimeout调用的时候，JavaScript引擎会启动定时器timer，大约millisec(ms)以后执行code，当定时器时间到，就把该事件放到主事件队列等待处理。

注意：

浏览器JavaScript线程空闲的时候才会真正执行

为什么呢？因为当JavaScript线程的正在处理其他JavaScript代码时，其实以已经阻塞了另外的代码，其中包括的setTimeout的定时器部分的实现。

为什么会失败

所以这也解释了为什么有时候使用第一种方法会失败的原因，因为页面渲染完成并不代表着js代码就执行完成的，假如在js代码中再次更改页面，还未更改之前this.$nextTick中的代码已经执行了，之后再更改页面这样就造成了，2次获取的数值不一样了，