JS 防抖和节流

一部分的用户会有频繁的触发事件执行行为（比如连续点击，滑动滚动条等），这就很有可能导致界面卡顿，甚至浏览器的崩溃，防抖和节流就是来解决这种问题。

1、防抖

触发高频事件后n秒（n为自行设置）内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。注意，只有足够空闲的时间，才执行一次

<div id="debounce" style="width: 100px;height: 100px;background-color: rebeccapurple;margin: 100px 300px;"></div>
<script>
    var db = document.getElementById("debounce");
    window.onload = function () {
        let obtn = document.getElementById('debounce'); //获取按钮
        obtn.addEventListener('click',debounceHandle(debounce),false); //监听绑定事件
    }
    //防抖函数
    function debounceHandle (fn) {
        let timer = null;
        return function () {
            clearTimeout(timer); //如果存在事件就清除定时器
            timer = setTimeout(function(){ //如果不存在那么就开启定时器
            fn.call(this,arguments);
            }