Vue中的函数防抖和节流

320 阅读1分钟

什么叫函数防抖?

      概念:当持续触发某事件时,一定时间间隔内没有再触发事件时,事件处理函数才会执行一次,如果设定的时间间隔到来之前,又一次触发了事件,就重新开始延时。代码:

在公共文件中封装函数:

   //函数防抖    debounce(fn, delay = 1000) {   //默认1000毫秒        var timer;        return function() {            var args = arguments;            if(timer) {                clearTimeout(timer);            }            timer = setTimeout(() => {                fn.apply(this, args);   // this 指向vue            }, delay);        };    },

通过export default对外暴露;

在vue中使用:

在script引入公共文件或者结构出那个防抖函数

methods:{
    函数名:debounce(fn函数,1000延迟数))
}

什么叫函数节流?

       概念:限制一个函数在一定时间内只能执行一次

节流函数封装:

 //函数节流    throttle(fn, wait = 1000) {        let timer;        return function () {          if (timer != null) return;          let context = this;          let args = arguments;          fn.apply(context, args);          timer = setTimeout(() => {            timer = null;          }, wait);        }      }

通过export default对外暴露;

在vue中使用:

在script引入公共文件或者结构出那个防抖函数

methods:{
    函数名:throttle(fn函数,1000延迟数))
}

        以上就是对函数节流防抖的封装!节流防抖的最大区别就是防抖是一个函数在一段时间里只执行最后一次,而节流是一个函数在一段时间里只执行一次~