防抖和节流

一.什么是防抖？
定义：高频事件触发后n秒内只执行一次，如果需要重复执行，则需要重新计算。
实现思路:在每次事件触发之前取消上一次的延时调用方法

function debounce(fn) {
   let timeout = null;
   return function () {
     clearTimeout(timeout);
     timeout = setTimeout(()=>{
       fn.apply(this,arguments)
     },500)
   }
 }
 function sayHi() {
   console.log('hi ');
 }
 var inp = document.getElementById('fangdou');
 inp.addEventListener('click',debounce(sayHi))

二.什么是节流？
定义：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率。
实现思路：每次触发事件之前判断是否 有延时函数

function tthrolte(fn) {
    let canreturn = true;
    return function () {
      if(!canreturn) return
      canreturn = false
      setTimeout(()=>{
        fn.apply(this,arguments)
        canreturn = true
      },500)

    }
  }
  function sayHi() {
    console.log('hi ');
  }
  var inp = document.getElementById('fangdou');
  inp.addEventListener('click',tthrolte(sayHi))

三.使用场景
防抖：滚动事件，表单验证
节流：调整屏幕大小
四.区别
防抖：将多次执行的函数，放在最后执行
节流：将多次执行的函数，分多次执行，每隔一段时间执行一次
参考文章：https://www.jianshu.com/p/a3114ec86539