Vue组件节流函数失效的常见原因及对策是什么？

本文共计1201个文字，预计阅读时间需要5分钟。

今天使用节流函数的时候遇到了一个问题，折腾了半天才找到原因，所以在这里做个总结。

节流函数 + 浏览器的一些事件，如resize、scroll、mousemove等，这些事件触发频率过高，绑定时需要注意。

例如，绑定resize事件时，如果频繁触发，可能会对性能产生影响。可以通过节流函数来限制触发频率。

今天使用节流函数的时候遇见了一个问题，搞了半天才找到原因，所以在这里做个总结。

节流函数

浏览器的一些事件，如：resize，scroll，mousemove等。这些事件触发频率太过频繁，绑定在这些事件上的回调函数会不停的被调用，加重浏览器的负担，导致用户体验非常糟糕。所以先贤们发明了节流函数，简单版本如下：

function throttle (f, wait = 200) { let last = 0 return function (...args) { let now = Date.now() if (now - last > wait) { last = now f.apply(this, args) } } }

假设有一个 vue 组件 svgMark。这个组件中渲染的元素要在页面窗口大小发生变化时重绘 reDraw ，而重绘时要使用节流函数防止性能损耗。