情景:在开发中,有大量的元素是通过动态加载出来的,很多时候我们需要在他渲染出来之后才执行,最常用的方法就是 setTimeout。但是,在很对项目中,setTimeout是不允许使用的,这个时候我们
可以尝试使用递归函数来等待目标元素的出现
// 等待目标元素的出现并开始观察
function waitForTargetElement() {
var targetElement = $('.layui-select-title').eq(1)[0];
if (targetElement) {
// 目标元素已经存在,开始观察它的变化
console.log('www')
console.log($('.layui-select-title').eq(1).width())
observer.observe(targetElement, config);
} else {
// 目标元素仍未出现,继续等待
requestAnimationFrame(waitForTargetElement);
}
}
// 开始等待目标元素的出现
waitForTargetElement();
这里我们是等待动态渲染元素$('.layui-select-title'),然后使用requestAnimationFrame函数进行递归调用,这也是和传统递归调用最大的区别,传统递归调用大概率会失败(要么是检测不到元素变化,要么是堆栈溢出),使用了requestAnimationFrame函数便可以轻松实现我们的要求。
requestAnimationFrame函数的作用与使用方法:
requestAnimationFrame
是一个 JavaScript 函数,用于在浏览器中执行动画效果。它与浏览器的刷新频率同步,通常为每秒60帧(60 FPS)。通过使用 requestAnimationFrame
,可以在浏览器中实现平滑、高性能的动画效果。
requestAnimationFrame
的作用是告诉浏览器在下一次重绘之前执行指定的函数。这个函数会自动传递一个时间戳参数,用于计算动画的进度和控制动画效果
requestAnimationFrame(传入你的函数名即可)