【转载】防抖和节流

转载：https://www.jianshu.com/p/518607d2f84b

防抖和节流-是针对响应跟不上触发频率这类问题的两种解决方案

debounce，去抖动。策略是当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。
debounce的特点是当事件快速连续不断触发时，动作只会执行一次。 延迟debounce，是在周期结束时执行。但当触发有间断，且间断大于我们设定的时间间隔时，动作就会有多次执行。
//必须在动作停止后计时算再执行,防抖类似于事件结束回调

    <div id="special">debounce</div>
    <script>
        var delay = 300;
        var special = document.getElementById('special')  // 获取页面的右边
        // 这是执行debounce的。
        window.onresize = function () {
            debounce(addlist, delay);  //这一个设置
        }
        function debounce(fn, delay) {    // 定义一个debounce函数
            if(fn.timeid)clearTimeout(fn.timeid);
            //清除时间戳（有才能清除
            fn.timeid = setTimeout(function () {
                fn();
            }, delay)//延迟一段时间执行addlist
        }
        
        function addlist() {                // 监听事件的响应事件，执行dom操作。
            special.innerHTML += '<li>k+</li>'
        }
    </script>

---

继续思考，使用上面的防抖方案来处理问题的结果是： 如果在限定时间段内，不断触发滚动事件（比如某个用户闲着无聊，按住滚动不断的拖来拖去），只要不停止触发，理论上就永远不会输出当前距离顶部的距离。

throttle节流：节流与抖动不一样，节流是会说预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。拿onscroll事件来说，如果使用的是抖动的话，只用当滚动停止后才会执行回调函数，在滚动的过程是不会执行的。节流不同，滚动的时候每隔一个时间周期就会执行一次回调，然后进入下一个新周期
原理：节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。
节流类似技能冷却时间

	<div id="common">throttle</div>
    <script>
        var delay = 300;
        var common = document.getElementById('common')  // 获取页面的左边
        function commonWay() {    // 这是执行了普通的函数
            common.innerHTML += '<li>k</li>'
        }
        // tottle的实现，也就是节流的实现,就是设置了一个一开始函数运行的时间戳进行执行
        var startTime=0,//开始时间
        timestamp,//当前时间
        timer;//定时器
        function throttle(fn, delay) {
            timestamp =+new Date();  // 获取当前时间
            if (timestamp - startTime >= delay) {
            //如果现在-开始>=延迟时间就执行
                fn();
                startTime = timestamp;
            }
        }
        window.addEventListener('resize', function () {
            throttle(commonWay, 1000);
        })
    </script>