前言
成都创新互联公司专注于贵港企业网站建设,
响应式网站设计,
成都商城网站开发。贵港网站建设公司,为贵港等地区提供建站服务。全流程按需网站制作，专业设计，全程项目跟踪，
成都创新互联公司专业和态度为您提供的服务
有echarts使用经验的同学可能遇到过这样的场景，在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的，resize事件是连续触发的这意味着echarts实例会连续的重绘这是非常耗性能的。还有一个常见的场景在input标签的input事件里请求后端接口，input事件也是连续触发的，假设我输入了“12”就会请求两次接口参数分别是“1”和“12”，比浪费网络资源更要命的是如果参数为“1”的请求返回数据的时间晚于参数为“12”的接口，那么我们得到的数据是和期望不符的。当然基于axios可以做很多封装可以取消上一个请求或者通过拦截做处理，但还是从防抖入手比较简单。
防抖和节流到底是啥
函数防抖（debounce）
解释：当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次，如果设定的时间间隔到来之前，又一次触发了事件，就重新开始延时。
案例：持续触发scroll事件时，并不立即执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发一次handle函数。
function debounce(fn, wait) {
let timeout = null
return function() {
if(timeout !== null) clearTimeout(timeout)
timeout = setTimeout(fn, wait);
}
}
function handle() {
console.log(Math.random())
}
window.addEventListener('scroll', debounce(handle, 1000))
网页标题：浅谈VUE防抖与节流的最佳解决方案(函数式组件)-创新互联
网站URL：
http://cdkjz.cn/article/dhijdp.html
