$nextTick与原生js先渲染dom再执行函数的方式

简介: $nextTick与原生js先渲染dom再执行函数的方式

$nextTick与原生js先渲染dom再执行函数的方式

前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有,很详细,分享给大家。大家及时保存,说不定啥时候就没了。

vue的$nextTick

简述

Vue.js 的 $nextTick 方法是用于在 DOM 更新后执行延迟回调的方法

当 Vue.js 更新 DOM 后,有时候需要执行一些操作(如获取更新后的 DOM 元素的位置等),但是这些操作必须在 DOM 更新后才能执行,否则可能得到不准确的结果。这时候就可以使用 $nextTick 方法,将要执行的操作放到 $nextTick 的回调函数中,Vue.js 会在下次 DOM 更新完成之后执行该回调函数

$nextTick 方法可以通过 Vue 实例及组件实例的实例方法调用,例如:

image.png

需要注意的是,$nextTick 方法是异步执行的,因此不能保证在下一帧立即执行,但是它会在 Vue.js 内部的 DOM 更新队列被清空后执行

原生jsDOM渲染完成再执行回调

简述

在 JavaScript 中,可以使用 window.onloaddocument.addEventListener('DOMContentLoaded', callback)方法来确保 DOM 元素已经被完全加载和渲染。这两种方法都会在 DOM 加载完成后执行回调函数。

window.onload事件会等待页面所有资源(包括图片、视频等)加载完成后才执行回调函数。示例代码如下:

window.onload = function() {
   
     
   // 在这里编写需要在 DOM 加载后执行的代码
}

document.addEventListener('DOMContentLoaded', callback)方法则会在 DOM 加载完成后立即执行回调函数,不必等待所有资源的加载完成。示例代码如下:

document.addEventListener('DOMContentLoaded', function() {
   
     
   // 在这里编写需要在 DOM 加载后执行的代码
})

需要注意的是,在使用 document.addEventListener('DOMContentLoaded', callback)方法时,要确保它在window.onload事件之前被触发,否则可能会导致回调函数无法执行。

目录
相关文章
|
18天前
|
JavaScript
js export 对外输出常量、变量和函数
js export 对外输出常量、变量和函数
18 5
|
16天前
|
JavaScript
js函数封装 —— 金额添加千分位分隔符
js函数封装 —— 金额添加千分位分隔符
16 2
|
17天前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
21 1
|
13天前
|
JavaScript
js 延时执行代码的最佳实践 —— 自定义 sleep 函数
js 延时执行代码的最佳实践 —— 自定义 sleep 函数
12 0
|
13天前
|
缓存 JavaScript API
js【详解】DOM
js【详解】DOM
10 0
|
15天前
|
JavaScript
js 高频实用函数封装汇总(持续更新)
js 高频实用函数封装汇总(持续更新)
12 0
|
15天前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
13 0
|
15天前
|
JavaScript
js 调试 —— 断点(含进入函数、条件断点等)
js 调试 —— 断点(含进入函数、条件断点等)
17 0
|
15天前
|
JavaScript
JS【详解】函数.bind()
JS【详解】函数.bind()
7 0
|
15天前
|
JavaScript
js 【详解】函数中的 this 指向
js 【详解】函数中的 this 指向
14 0