js 节流与防抖

节流和防抖都是为了限制高频触发函数，防止由于触发次数频繁导致：响应延迟、卡顿、假死的情况。
节流和防抖的前提都是：一个函数被多次触发，应用两者的时候可通过优化目的倾向于减少触发频率还是短时间触发一次就行来决定。

原理

节流

当多次触发函数事件时，在规定的时间间隔中无法再次调用，只有前一次的函数执行后，超过了规定的时间间隔后才可以进行下一次的函数调用。简单的来说就是：连续触发函数，在规定的时间间隔只触发一次。

防抖

当持续触发函数时，在规定的时间间隔没有再次触发函数，才会执行函数，若在规定的时间内再次触发函数，则时间间隔重新计算。简单的来说就是：连续触发函数时，在规定的时间间隔后执行，若未到时间间隔又触发了函数，则时间重新计算。

常用应用场景

节流

1、页面滚动
2、鼠标点击
3、input 输入框监听（分情况）
4、窗口resize
5、计算进度条

防抖

1、input 输入框监听
2、鼠标移动
3、短信验证码
4、表单提交

方法实现

节流

export function throttle (fn, interval) {
  var last
  var timer
  var interval1 = interval || 500
  return function () {
    var th = this
    var args = arguments
    var now = +new Date()
    if (last && now - last < interval) {
      clearTimeout(timer)
      timer = setTimeout(function () {
        last = now
        fn.apply(th, args)
      }, interval1)
    } else {
      last = now
      fn.apply(th, args)
    }
  }
}

防抖

export function debounce (fn, delay) {
  var timer
  var delay1 = delay || 500
  return function () {
    var th = this
    var args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function () {
      timer = null
      fn.apply(th, args)
    }, delay1)
  }
}

vue中的引用

1、可将上述两个函数放入同一个文件js文件中
2、在vue中引入js文件
3、在对应的函数使用即可

//	引入js文件
import { debounce } from '../utils/debounce'

 methods: {
   test: debounce(function () {
   	console.log('debounce is OK!')
    },5000),
   test1: throttle (function () {
     console.log('throttle is OK!')
    },5000)  
 }