Vue项目中使用防抖和节流 |
您所在的位置：网站首页 › vivos9防抖功能 › Vue项目中使用防抖和节流 |
Vue项目中使用防抖和节流
|
写在前面
防抖和节流的思想和实现都比较简单，也在实现过程中理清了闭包的概念。 不过在vue项目中使用就遇到了一些问题，没有正确调用，没有使用单例等问题。理解之后记录一下怎么使用 一、防抖（debounce） 1.触发高频事件后n秒内函数只会执行一次，如果在n秒内高频事件再次被触发，则重新计算时间。简单的说也就是一定时间段的无论点击多少次，只会执行最后一次的调用。前面的会被清除 2.在methods中直接实现 debounce (func, delay = 1000, immediate = false) { //闭包 let timer = null //不能用箭头函数 return function () { if (timer) { clearTimeout(timer) } if (immediate && !timer) { func.apply(this,arguments) } timer = setTimeout(() => { func.apply(this,arguments) }, delay) } }, 3.使用 export default { mounted () { this.debounceInput = this.debounce(this.handle, 1000,false) }, data () { return { text: '', debounceInput: () => {}, } }, methods: { handle (value) { console.log(value) }, debounce (func, delay = 1000, immediate = false) { let timer = null //不能用箭头函数 return function () { //在时间内重复调用的时候需要清空之前的定时任务 if (timer) { clearTimeout(timer) } //适用于首次需要立刻执行的 if (immediate && !timer) { func.apply(this,arguments) } timer = setTimeout(() => { func.apply(this,arguments) }, delay) } }, } } 4.效果图简单的说也就是一定时间内的无论点击多少次，都只会执行第一次，其余的直接return 2.在utils.js中实现（时间戳版本） export const throttle = (fn, delay = 1000) => { //距离上一次的执行时间 let lastTime = 0 return function () { let _this = this let _arguments = arguments let now = new Date().getTime() //如果距离上一次执行超过了delay才能再次执行 if(now - lastTime > delay){ fn.apply(_this,_arguments) lastTime = now } } } 3.在vue中引入使用 import {throttle} from '../utils' export default { name: 'throttle', data () { return { text: '', } }, methods: { handle (value) { console.log(value) }, throttleInput: throttle(function (...args) { this.handle(...args) }) } } 4.效果图这个节流效果有一个小瑕疵，如果是上一次执行和下一次用户输入的时间差在delay内的话，这个输入结果却没有被打印
之前有接触过闭包这个概念，但是这个直译让人摸不着头脑，而且各种解释又比较繁杂，现在自己实现了一遍才了解到什么是闭包。 用java来举个不严谨的栗子，闭包就是：一个private变量，我们可以通过一个公开的方法去访问它。 |
【本文地址】
今日新闻 |
推荐新闻 |