Vue 节流与防抖(防止重复点击或重复上拉加载)

3,965 阅读1分钟

Lodash

是一个一致性、模块化、高性能的 JavaScript 实用工具库,官方文档Lodash

节流 Lodash.throttle

节流的策略是,固定周期内,只执行一次动作,若有新事件触发,不执行。周期结束后,又有事件触发,开始新的周期。

节流
节流示意图

import _ from 'lodash'
export default{
 methods:{
    clickFunction:_.throttle(function(){
            console.log('hello')
            console.log(this)
    },1000)
 }
}

防抖

去抖动。策略是当事件被触发时,设定一个周期延迟执行动作,若期间又被触发,则重新设定周期,直到周期结束,执行动作。 debounce的特点是当事件快速连续不断触发时,动作只会执行一次,是在周期结束时执行。

延迟debounce
延迟debounce

前缘deouunce
前缘debounce

    clickFunction:_.debounce(function(){
            console.log('hello')
            console.log(this)
    },1000)