JS节流和防抖的区分和实现详解

本文主要介绍的是JS中两个常用并且容易混淆的函数：节流函数和防抖函数。从概念、使用场景到代码简单实现做了一个详细的讲解，希望对你有所帮助。

节流概念(Throttle)
按照设定的时间固定执行一次函数，比如500ms一次。注意：固定就是你在mousemove过程中，执行这个节流函数，它一定是500ms（你设定的定时器延迟时间）内执行一次。没到500ms，一定会返回，没有执行回调函数的。

简单来说：就是指触发事件后在n秒内函数只能执行一次。如果在n秒内又触发了事件，则会重新计算函数的执行时间

主要应用场景有：scroll、touchmove

代码演示：

var timer = null;
 function Throttle() {
     if (timer) {
         clearTimeout(timer);
     }
     timer = setTimeout(function (){
         console.log("Throttle");
     },500);
 }

防抖概念(Debounce)
抖动停止后的时间超过设定的时间时执行一次函数。注意：这里的抖动停止表示你停止了触发这个函数，从这个时间点开始计算，当间隔时间等于你设定时间，才会执行里面的回调函数。如果你一直在触发这个函数并且两次触发间隔小于设定时间，则一定不会到回调函数那一步。

简单来说：就是指连续触发事件但是在n秒内只会执行一次函数

主要应用场景有：input验证、搜索联想、resize

代码演示：

var timer = '';
 function Debounce() {
     if (timer) {
         return '';
     }
     timer = setTimeout(function () {
         console.log('Debounce');
         clearTimeout(timer);
         timer ='';
     },500);
 }