js高级——使用递归函数来等待目标元素

情景：在开发中，有大量的元素是通过动态加载出来的，很多时候我们需要在他渲染出来之后才执行，最常用的方法就是 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(传入你的函数名即可)