防抖和节流的例子解释

防抖和节流的例子

防抖：触发事件在n秒内只执行一次，若在n秒内再次触发，则重新计算时间

如：在点击按钮之后，经过2秒钟时按钮会触发事件，如果在1.5秒时再次点击按钮，则需要重新计算2秒事件才会触发。

节流：连续发生的事件在n秒内只执行一次

也就是说在规定时间内，不管操作多少次，函数只会执行一次。

首先定义div标签用于显示页面操作

<div id="content" style="height: 150px;line-height: 150px;text-align: center;background-color: aqua;"></div>

定义全局变量

	let number=0;
    let content = document.getElementById('content');
    function sum(){
      content.innerHTML = number++;
    }

防抖方案一：事件响应两秒之后执行

//防抖debounce
    //事件响应2秒后执行
    function debounce(fun, waittime) {
      let timeout;//设置定时器
      return function(){
        if(timeout)//如果存在定时器则清空
          clearTimeout(timeout);
       //如果没有定时器则执行下面函数
        timeout = setTimeout(function () {
          fun.apply(this);//函数调用
        },waittime)
      }
    }

防抖方案二：事件立即响应，两秒之后才能再一次操作

//事件立即响应，2秒之后才能重新点击响应
    function debounce(fun,waittime){
      let timeout;//设置定时器
      return function(){
        if(timeout)//如果存在定时器则清空
          clearTimeout(timeout);
        //类型转换
        let timenow = !timeout;

        //规定时间之后重新响应
        timeout = setTimeout(()=>{
          timeout = null;
        },waittime);

        //没有定时器时，timenow为true,执行函数
        if(timenow)
          fun.apply(this);
      }
    }

函数调用

content.onmousemove=debounce(sum, 2000);

节流方案一：设置定时器

// 节流 throttle
    // 设置定时器的方法
    function throttle(fun,waittime){
      let timeout;//设置定时器
      return function () {
        // 如果没有定时器，则执行下面函数
        if(!timeout){
          timeout = setTimeout(()=>{
            timeout=null;
            fun.apply(this);
          },waittime)
        }
      }
    }

节流方案二：定义时间戳

 //时间戳方法
    //通过时间之差判断函数是否执行
    function throttle(fun,waittime) {
      let prev=0;
      return function() {
        let now = Date.now();
        if(now-prev>waittime){
          fun.apply(this);
          prev=now;
        }
      }
    }

节流的方案主要是满足在规定时间内即使多次操作，函数也只会执行一次

函数调用

content.onmousemove=throttle(sum,2000);

参考学习，总结分享，侵权可删