js手动触发resize事件不生效解决办法(一)

JavaScript中手动触发resize事件代码

• 老版本(大多人都在用但是即将进入2023年了；此方法已经被标注为废弃了 But 没个三五年是不会真正被废弃的)

    const event = document.createEvent('HTMLEvents')
    event.initEvent('resize', true, true)
    event.eventType = 'message'
    window.dispatchEvent(event)

• 老版本问题：
  • 在react、Vue等框架中 经常不生效
• 老版本解决办法(一)
  • 加定时器解决

setTimeout(() => {
    const event = document.createEvent('HTMLEvents')
    event.initEvent('resize', true, true)
    event.eventType = 'message'
    window.dispatchEvent(event)
}, 350)

• 产生问题的的原因

  当我们点击某些按钮后；执行某些操作；更改div元素大小并触发我们写的手动触发resize事件；表面上看着是没有问题的；实际上的执行却是：

  1. js点击后通知 react\vue等框架更改div的宽度数据
  2. 框架开始搞虚拟dom 着手准备开始更新组件（仅仅是着手并未更新完dom）
  3. 瞬间触发手动resize事件
  4. 其他监听resize事件的地方瞬间获取到resize 开始执行设定的回调
  5. 第4步搞完后 更新dom（或者说是第4步和更新dom是同时的 但是更新dom相比较与第4步的js运行来说总是很慢的）
  6. dom更新完毕 发现我们监听resize回调的地方好像没起作用？（因为第4步的时候获取的dom元素的宽高还是之前的dom没有更新的时候(实际上执行了risize回调但没啥卵用，dom都没获取到最新的)，所以需要加定时器等dom渲染完 一般dom更新都在300毫秒内 不排除老旧电脑 自己多试几次吧！建议350毫秒~400毫秒)
  7. 定时器是最快的解决方法但是却是最初级的;不考虑页面抖动可以使用此方法(因为定时器必须设置很大的毫秒数保证dom完毕后再执行resize事件)

新版本代码

使用 Event 对象来触发 仍然需要加定时器来解决

问题与老版本一样 只是浏览器推荐使用此语法

const ev: any = new Event('resize');
window.dispatchEvent(ev);

有没有更好的解决办法？ 不想看到定时器咋办；

没有原生监听dom更新完毕的方法吗？

如何自己给dom更新添加回调？

我就想监听某个div的元素大小改变如何实现

问题已经解决；敬请期待下一篇文章监听某个div的元素大小改