防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案
1.防抖：通过setTimeout的方式，在一定时间间隔内将多次触发事件变成一次触发，可分为触发第一次和最后一次触发
2.节流：减少一段时间的触发频率
例子：当我们点击这个div时里面的数字依次加1

<div class="box">1</div>

  .box {
            width: 100px;
            height: 100px;
            background: orange;
            color: #fff;
            font-size: 30px;
            text-align: center;
            line-height: 100px;
            margin: 40px auto;
        }

第一次触发(防抖)

 var box = document.querySelector(".box");//获取元素
    var num = parseInt(box.innerHTML);//获取div里面的数字
    var boxTime1 = null;//声明一个定时器
    var bol=true;//判断是否点击
    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);//获取div里面的数字
    var boxTime1 = null;//声明一个定时器
    box.onclick=function(){
    	clearTimeout(boxTime1);
    	boxTime1 = setTimeout(function(){
    		num++;
    		box.innerHTML = num;
    	},2000);
}

每隔2秒执行一次（节流）

var box = document.querySelector(".box");//获取元素
    var num = parseInt(box.innerHTML);//获取div里面的数字
    var boxTime2 = null;//声明一个定时器
    var bol = true;//判断点击是否过了规定时间
    box.onclick = function() {
        if (bol) {
            bol = false;
            boxTime2 = setTimeout(function() {
                num++;
                box.innerHTML = num;
                bol = true;
            }, 2000)
        }
    }