防抖和节流

防抖

• 防抖是指在一定的时间内再次触发此事件,会清空上次的事件重新开始,如果制定的时间内没有再次触发,那么这个事件才会执行
• 例如: input输入信息,不可能每次按下都发起一个ajax请求,可以等一段时间内不输入了之后在发起请求

节流

• 节流是指在一定的时间同一事件只会触发一次,只有超过了这个时间才会再次出发
• 例如: 验证码60秒内不可以再次触发(实际开发肯定是使用禁止,但是原理和验证码一样)

原生JS实现节流防抖

防抖函数

的作用就是控制函数在一定时间内的执行次数。防抖意味着 N 秒内函数只会被执行一次（最后一次），如果 N 秒内再次被触发，则重新计算延迟时间。

export function _debounce(fn,delay){
    let delay = delay || 200;
    let timer
    return function(){
        let th = this;
        let args = arguments;
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(()=>{
            timer = null;
            fn.apply(th,args)
        },delay)
    }
}

节流函数

的作用是规定一个单位时间，在这个单位时间内最多只能触发一次函数执行，如果这个单位时间内多次触发函数，只能有一次生效。

export function  _throttle(fn,interval){
    let last;
    let timer;
    let interval = interval||200;
    return function(){
        let th = this;
        let args = arguments;
        let now += new Date();
        if(last&&now-last<interval){
            clearTimeout(timer);
            timer = setTimeout(()=>{
                last = now;
                fn.apply(th,args)
            },interval)
        }else{
            last = now;
            fn.apply(th,args)
        }
    }
}

Vue中使用节流防抖

新建一个工具函数utils.js

let isStop = true
let timer = null

//防抖函数
export function debounce (fn){
    return function(){
        clearTimeout(timer)
        let timr = setTimeout(()=>{
            fn.apply(this,arguments)
        },2000)
    }
}

//节流函数
export function throttle(fn){
    if(!isStop) return
    isStop = false
    setTimeout(()=>{
        fn.apply(this,arguments)
        isStop = true
    },2000)
}

在main.js中引入

import * as utils from './utils.js'
Vue.use(utils)
Vue.prototype.$utils = utils

使用

this.$utils.debounce(function(){
    
})()