浅谈VUE防抖与节流的最佳解决方案(函数式组件)_vue3防抖传参报错资源-CSDN文库

100 浏览量 2020-10-16 23:05:48 上传评论收藏 98KB PDF 举报

资源推荐

资源详情

资源评论

浅谈浅谈VUE防抖与节流的最佳解决方案防抖与节流的最佳解决方案(函数式组件函数式组件)

主要介绍了浅谈VUE防抖与节流的最佳解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作

具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言前言

有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))

addEventListener的第二个参数实际上是debounce函数里return回的方法，let timeout = null 这行代码只在addEventListener

的时候执行了一次触发事件的时候不会执行，那么每次触发scroll事件的时候都会清除上次的延时器同时记录一个新的延时

器，当scroll事件停止触发后最后一次记录的延时器不会被清除可以延时执行，这是debounce函数的原理

函数节流（函数节流（throttle））

解释：当持续触发事件时，有规律的每隔一个时间间隔执行一次事件处理函数。

案例：持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数。

function throttle(fn, delay) {

var prev = Date.now()

return function() {

var now = Date.now()

if (now - prev > delay) {

fn()

prev = Date.now()

}

}

}

function handle() {

console.log(Math.random())

}

window.addEventListener('scroll', throttle(handle, 1000))

原理和防抖类似，每次执行fn函数都会更新prev用来记录本次执行的时间，下一次事件触发时判断时间间隔是否到达预先的设

定，重复上述操作。

防抖和节流都可以用于 mousemove、scroll、resize、input等事件，他们的区别在于防抖只会在连续的事件周期结束时执行一

次，而节流会在事件周期内按间隔时间有规律的执行多次。

在在vue中的实践中的实践

在vue中实现防抖无非下面这两种方法

封装utils工具

封装组件

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

内容反馈

weixin_38698311

粉丝: 9
资源: 925

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip