防抖和节流的区别

防抖和节流（面试常问）

防抖

1.定义：

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

2.思路:

每次触发事件时都取消之前的延时调用方法

function debounce(fn) {
    // 创建一个标记用来存放定时器的返回值

      let timeout = null; 

      return function () {
          // 每当用户输入的时候把前一个 setTimeout clear 掉

        clearTimeout(timeout); 

        // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果       还有字符输入的话，就不会执行 fn 函数

        timeout = setTimeout(() => { 

           console.log('防抖成功');

        }, 500);

      };

    }

3举例：

1.登陆，发短信（倒计时），防止用户点击过快，以至于发送多次请求。

2.用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；

3.调整浏览器窗口大小时，window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次；

4.原理：

防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。

24.节流

1.定义：

• 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

2.思路：

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

function throttle(fn) {
     // 通过闭包保存一个标记

      let canRun = true;

      // 在函数开头判断标记是否为true，不为true则return

      return function () {
        if (!canRun) return; 

        // 立即设置为false

        canRun = false; 

        // 将外部传入的函数的执行放在setTimeout中

        setTimeout(() => { 

          fn.apply(this, arguments);

          // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉

          canRun = true;

        }, 500);

      };

    }

3.举例：

(1)鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

(2)在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；

(3)监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；

4.原理：

节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。