函数防抖：将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。

一、防抖

场景：在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作。
一般的防抖会有immediate选项，表示是否立即调用。

// 这个是用来获取当前时间戳的function now() {
  return +new Date()}/**
 * 防抖函数，返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行
 *
 * @param  {function} func        回调函数
 * @param  {number}   wait        表示时间窗口的间隔
 * @param  {boolean}  immediate   设置为ture时，是否立即调用函数
 * @return {function}             返回客户调用函数
 */function debounce (func, wait = 50, immediate = true) {
  let timer, context, args  // 延迟执行函数
  const later = () => setTimeout(() => {
    // 延迟函数执行完毕，清空缓存的定时器序号
    timer = null
    // 延迟执行的情况下，函数会在延迟函数中执行
    // 使用到之前缓存的参数和上下文
    if (!immediate) {
      func.apply(context, args)
      context = args = null
    }
  }, wait)

  // 这里返回的函数是每次实际调用的函数
  return function(...params) {
    // 如果没有创建延迟执行函数（later），就创建一个
    if (!timer) {
      timer = later()
      // 如果是立即执行，调用函数
      // 否则缓存参数和调用上下文
      if (immediate) {
        func.apply(this, params)
      } else {
        context = this
        args = params      }
    // 如果已有延迟执行函数（later），调用的时候清除原来的并重新设定一个
    // 这样做延迟函数会重新计时
    } else {
      clearTimeout(timer)
      timer = later()
    }
  }}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748

整体函数实现的不难，总结一下。

1.对于按钮防点击来说的实现：如果函数是立即执行的，就立即调用，如果函数是延迟执行的，就缓存上下文和参数，放到延迟函数中去执行。一旦我开始一个定时器，只要我定时器还在，你每次点击我都重新计时。一旦你点累了，定时器时间到，定时器重置为 null，就可以再次点击了。

2.对于延时执行函数来说的实现：清除定时器ID，如果是延迟调用就调用函数

二、节流

防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率。

思路：每次触发事件时都判断当前是否有等待执行的延时函数。

function throttle(fn) {
     let canRun = true; // 通过闭包保存一个标记
     return function () {
       if (!canRun) return; // 在函数开头判断标记是否为 true，不为 true 则 return
       canRun = false; // 立即设置为 false
       setTimeout(() => { // 将外部传入的函数的执行放在 setTimeout 中
         fn.apply(this, arguments);
         // 最后在 setTimeout 执行完毕后再把标记设置为 true(关键) 
         //表示可以执行下一次循环了。当定时器没有执行的时候
         //标记永远是 false，在开头被 return 掉
         canRun = true;
       }, 500);
     };
   }
   function sayHi(e) {
     console.log(e.target.innerWidth, e.target.innerHeight);
   }
   window.addEventListener('resize', throttle(sayHi));

函数防抖：将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

节流

高频触发某个事件，在n秒内只会执行一次

1、函数防抖

函数防抖就是我们在一段时间内频繁触发同一个事件，可能会十分的影响性能。想要在一段时间内只触发一次。这就要用到防抖和节流。举个例子，防抖是频繁触发后，1s内没有再触发时才调用事件处理程序。

function debounce(callback, time) {

        var timer;

        //使用闭包,可以避免污染全局变量

        return function () {

            clearTimeout(timer) //清除计时器

            //重新开始计时

            var args = arguments

            timer = setTimeout(() => {

                callback.apply(null, args)

            }, time);

        }

    }

    //测试案例

    var handle = debounce(function (a, b) {

        console.log(a, b)

    }, 1000)

    [removed] = function () {

        handle(1, 2)

    }

2、函数节流

和防抖相对应的就是节流了，节流就是在一段时间内只触发一次！

function throttle(callback, time, immediately) {

        if (immediately) {//是否立即执行一次

            var t;

            return function () {

                //之前没有计时 或 距离上次执行的时间已超过规定的值

                if (!t || Date.now() - t >= time) {

                    callback.apply(null, arguments)

                    //得到的当前时间戳

                    t = Date.now()

                }

            }

        } else {//如果不立即执行一次，那么这个时间让他延迟多长时间后再执行

            var timer;

            return function () {

                if (timer) return

                var args = arguments

                timer = setTimeout(() => {

                    callback.apply(null, args)

                    timer = null

                }, time);

            }

        }

    }

  防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

  节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

  函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

1、防抖（类似于 电梯 屏保 类的）

在固定时间内没有触发事件会在固定时间结束后触发，如果在固定时间内触发了就会延长固定时间

防抖主要利用定时器实现

//用定时器实现防抖

function debounce(func,wait) {

    var timer=null;

    return function() {

    //保存当前调用的dom对象

     var _this=this;

     //保存事件对象

     var args=arguments;

     clearTimeout(timer)

     timer=setTimeout(function() {

         func.apply(_this,args)

     },wait)

    }

2、节流

无论在固定时间内是否有事件触发，都会按照固定时间规律触发

时间戳

定时器