Vue组件节流函数失效，是组件逻辑错误还是外部因素干扰？

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

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

节流函数+浏览器的一些事件，如resize、scroll、mousemove等，这些事件触发频率过高，绑定太多会导致性能问题。

因此，需要限制这些事件触发的频率。

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

节流函数

浏览器的一些事件，如：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 ，而重绘时要使用节流函数防止性能损耗。