防抖函数与节流函数使用

他们都是可以防止一个函数被无意义的高频率调用

防抖函数:是函数在特定的时间内不被再调用后执行
节流函数:是确保函数特定的时间内至多执行一次。

<input v-model="searchText" @input='search' placeholder="防抖" class="search-placeholder">
<input v-model="searchText" @input="searchInputChage" placeholder="节流" class="search-placeholder">

1.防抖函数

• 定义：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。

• 实现原理：函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。

• 使用场景：文本框输入搜索（连续输入时避免多次请求接口）

export default {
    debounce(fn, delay = 500) {   //默认500毫秒
        var timer = null
        return function() {
            var args = arguments;
            if(timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                fn.apply(this, args);   // this 指向vue
            }, delay);
        };
    }
}

import debounce from '@/utils/common.js'; //注意引用路径

search:debounce(() => {//防抖使用
  //请求接口
},300)

2.节流函数

• 定义：规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。

• 实现原理：其原理是用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，如果是，则执行，并更新上次执行的时间戳，

• 使用场景：resize、scroll、mousemove等事件触发监听

export default {
  throttle(fn,delay = 500,duration = 1000){
    var that = this;
    var timer = this.timer;
    var begin = new Date().getTime();
    return function(){
      var context = that;
      var args = arguments;
      var current = new Date().getTime();
      clearTimeout(timer);
      if(current-begin>=duration){
        fn.apply(context,args);
        begin=current;
      }else{
        console.log(delay)
        that.timer=setTimeout(function(){
        fn.apply(context,args);
        },delay);
      }
    }
  }
}

import throttle from '@/utils/common.js'; //注意引用路径

searchInputChage() {//节流使用
  throttle (this.getSearch, 200,1000)();
},
getSearch(){
  //请求接口
}