JavaScript节流和防抖

页面效果

 

防抖指在多次点击下只触发一次

    var box = document.querySelector(".box");
    var num = parseInt(box.innerHTML);
    box.onclick = function () {
      clearTimeout(boxTime1);
      if (bol) {
        num++;
        box.innerHTML = num;
        bol = false;
      }
      boxTime1 = setTimeout(function () {
        bol = true;
      }, 2000);
    };

当你连续点击多次的情况下只执行第一次

第二种情况是当你连续点击多下只执行最后一次

    var box = document.querySelector(".box");
    var num = parseInt(box.innerHTML);
    box.onclick=function(){
        clearTimeout(boxTime1);
        boxTime=setTimeout(function(){
            num++;
            box.innerHTML=num;
        },1000);
    }

 

节流指在规定时间内执行一次

    var box = document.querySelector(".box");
    var num = parseInt(box.innerHTML);
    var boxTime1 = null;
    var bol = true;

    // 规定时间内触发一次(节流)
    box.onclick = function () {
      if (bol) {
        bol = false;
        boxTime1 = setTimeout(function () {
          num++;
          box.innerHTML = num;
          bol = true;
        }, 2000);
      }
    };