防抖(debounce) 和 节流(throttling)

一、函数防抖

1. 定义
   在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。
2. 实现原理
   函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。
3. 使用场景
   文本框输入搜索（连续输入时避免多次请求接口）
4. 代码实现

/**
 * 函数防抖
 */
export function debounce(fn, delay) {
  // 记录上一次的延时器
  var timer = null;
  var delay = delay || 200;
  return function() {
    var args = arguments;
    var that = this;
    // 清除上一次延时器
    clearTimeout(timer)
    timer = setTimeout(function() {
        fn.apply(that,args)
    }, delay);
  }

二、函数节流

1. 定义
   规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。
2. 实现原理
   其原理是用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，如果是，则执行，并更新上次执行的时间戳，
3. 使用场景

resize、scroll、mousemove等事件触发监听

1.代码实现

/**
 1. 函数节流
 */
export function throttle(fn,delay){
  var lastTime;
  var timer;
  var delay = delay || 200;
  return function() {
    var args = arguments;
    // 记录当前函数触发的时间
    var nowTime = Date.now();
    if (lastTime && nowTime - lastTime < delay) {
      clearTimeout(timer);
      timer = setTimeout(function () {
        // 记录上一次函数触发的时间
        lastTime = nowTime;
        // 修正this指向问题
        fn.apply(this, args);
      }, delay);
    }else{
      lastTime = nowTime;
      fn.apply(this, args);
    }
  }
} 

在Vue中使用函数防抖实现输入框搜索

1. 新建common.js文件

/**
 1. 函数防抖
 */
export function debounce(fn, delay) {
  // 记录上一次的延时器
  var timer = null;
  var delay = delay || 200;
  return function() {
    var args = arguments;
    var that = this;
    // 清除上一次延时器
    clearTimeout(timer)
    timer = setTimeout(function() {
        fn.apply(that,args)
    }, delay);
  }
}

2. 在vue组件中引入

import  {debounce}  from  '@/utils/common.js'

1. 在组件中使用

<div class="white-search-bar">
        <div class="search-bar-item">
          <span class="iconfont icon-search"></span>
          <input class="search-bar-input" :class="{'search-bar-focus':isSearchFocus}" type="text" maxlength="8" placeholder="应用搜索" v-model="keyword" @keyup="appSearch" @focus="onSearchFocus" @blur="onSearchBlur">
        </div>
        <span class="search-bar-btn" @click="appSearchCancel" v-if="isSearchFocus">取消</span>
      </div>
 
methods:{
appSearch:debounce(function(){
              this.getAppList()
     },300)
}

vue使用节流

我要的效果是停止滚动2s后执行一次fnHandleScroll函数。解决办法把fnScroll函数从method方法中移入到data属性中，然后在created生命周期给fnScroll赋值，可以完美解决这个bug。

<template>
  <div class="cfpa-brief-preview-scroll" ref="previewText" @scroll.passive="fnScroll">
     // 此处省略html代码
  </div>
</template>
<script>
export default {
  name: 'publicPreviewBriefing',
  data () {
    return {
      count: 0,
      fnScroll: () => {}
    }
  },
  created () {
    this.fnScroll = this.fnThrottle(this.fnHandleScroll, 2000)
  },
  methods: {
    /**
     * @description [fnHandleScroll 内容区域滚动]
     * @author   shanshuizinong
     * @param    {Object}   e [事件对象]
     * @returns   {null}    [没有返回]
     */
    fnHandleScroll (e) {
      console.log('scroll触发了：' + this.count++, new Date())
    },
    /**
     * @description [fnThrottle 节流函数]
     * @author shanshuizinong
     * @param {Function} fn 延时调用函数
     * @param {Number} delay 延迟多长时间
     * @param {Number} atleast 至少多长时间触发一次
     * @return {Function} 延迟执行的方法
     */
    fnThrottle (fn, delay, atleast) {
      let timer = null
      let previous = null
      return function () {
        let now = +new Date()
        if (!previous) previous = now
        if (atleast && now - previous > atleast) {
          fn()
          previous = now
          clearTimeout(timer)
        } else {
          clearTimeout(timer)
          timer = setTimeout(function () {
            fn()
            previous = null
          }, delay)
        }
      }
    }
  }
}
</script>