防抖和节流

防抖和节流的区别,以及如何实现？

防抖：设置一段时间，当用户连续触发事件的时候，此时只会执行一次。
节流：设置一段时间，当用户连续点击的时候，每隔一段时间执行一次。

  var btn = document.getElementById('btn')  
  var timeT  = null   
  btn.onclick = () => {   
          clearTimeout(timeT);      
          timeT =  setTimeout(() => {       
              console.log("正在发送请求。。。")     
          }, 500)  
      }  

解释：定义一个全局的timeT变量，并将定时器赋值给全局变量，第一次点击的时候过了0.5秒会执行定时器内的内容，在5秒内点击的多次都会被清除掉。

防抖案例：（el-input）

    <template>
        <div>
            <el-input style="width:200px;" placeholder="请输入" v-model="searchInput" clearable />
        </div>
    </template>

    <script>
    export default {
        data () {
            return {
                searchInput: '',
                timer: null
            }
        },
        watch: {
            searchInput () {
                this.debounce(this.getUpList, 500)
            }
        },
        methods: {
            debounce (fn, wait) {
                 if (this.timer !== null) {
                     clearTimeout(this.timer)
                     }
                     this.timer = setTimeout(fn, wait)
              },
                
                getUpList () {
                // 请求内容...
                console.log('正在发送请求。。。。')
            }
        }
     }

    </script>

防抖二

    const BTN = document.getElementById("btn");
    BTN.onclick = ()=>{debounce(func, 500)}
    
    function func() {
        return console.log("发送请求。。。");
    }
    
    let timer = null;

    function debounce(func, time) {
        if (timer) {
            clearTimeout(timer);
        }

        timer = setTimeout(() => {
            func();
        }, time);
    }
    

防抖三

    const BTN = document.getElementById("btn");
    BTN.onclick = debounce(func, 500);
    
    function func() {
        return console.log("发送请求。。。");
    }
    
    function debounce(func, time) {
        let timer = null;
        return () => {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                func();
            }, time);
        };
    }

节流一

    var btn = document.getElementById('BTN')  
    let timeOut = true;
    
    btn.onclick = () => {     
        if (timeOut) {       
            timeOut = false       
            console.log('正在发送请求。。。')       
            setTimeout(() => {         
                timeOut = true       
            }, 2000)     
        }  
    }

解释：timeOut相当于一个阀门，先定义一个全局的timeOut为true， 当进入if判断的时候立即关闭阀门，让timeOut变成false，此时发送了一个请求，然后通过定时器来限制timeOut变成true的时候，这样下一次timeOut变成true是两秒之后， 这样就实现了每隔多少秒发送一次请求的操作。

节流二

    let timer = true;
    
    BTN.onclick = () => { 
        throttle(func, 1000);
    }; 
    
    let func = () => { 
        console.log("发送请求。。。");
    }; 
    
    function throttle(func, time) { 
        if (timer) {
            timer = false; 
            func(); 
            setTimeout(() => { 
                timer = true; 
            }, time);
        } 
    }

节流三

const BTN = document.getElementById("btn");
BTN.onclick = throttle(func, 1000); 

function func() {
  return console.log("发送请求。。。");
} 
function throttle(func, time) { 
  let timer = true; 
  return () => { 
      if (timer) { 
          timer = false; 
          func();
          setTimeout(() => { timer = true; }, time);
      } 
  };
}