防抖和节流

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

debounce，去抖动。策略是当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。 这是debounce的基本思想，在后期又扩展了前缘debounce，即执行动作在前，然后设定周期，周期内有事件被触发，不执行动作，且周期重新设定。

      debounce的特点是当事件快速连续不断触发时，动作只会执行一次。 延迟debounce，是在周期结束时执行。但当触发有间断，且间断大于我们设定的时间间隔时，动作就会有多次执行。

防抖：<div id="common"></div>

    <div id="special"></div>

    <script>

        var delay = 300;

        var common = document.getElementById('common')  // 获取页面的左边

        var special = document.getElementById('special')  // 获取页面的右边

        // 这是执行debounce的。

        window.onresize = function () {

            debounce(addlist, delay)  //这一个设置

            commonWay()  // 这个是普通的函数执行

        }

        function debounce(fn, delay) {    // 定义一个debounce函数

            clearTimeout(fn.timeid)

            fn.timeid = setTimeout(function () {

                fn()

            }, delay)

        }

        function addlist() {                // 监听事件的响应事件，执行dom操作。

            special.innerHTML += '<li>k</li>'

        }

        function commonWay() {    // 这是执行了普通的函数

            common.innerHTML += '<li>k</li>'

        }

    </script>

---

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

节流：<div id="common">

        throttle

    </div>

    <div id="special">

        debounce

    </div>

    <script>

        var delay = 300;

        var common = document.getElementById('common')  // 获取页面的左边

        var special = document.getElementById('special')  // 获取页面的右边

        function addlist() {                // 监听事件的响应事件，执行dom操作。

            special.innerHTML += '<li>k</li>'

        }

        function commonWay() {    // 这是执行了普通的函数

            common.innerHTML += '<li>k</li>'

        }

        // tottle的实现，也就是节流的实现,就是设置了一个一开始函数运行的时间戳进行执行

        var startTime,timestamp,timer;

        function throttle(fn, delay) {

            timestamp = +new Date()  // 先设置开始的时间

            clearTimeout(timer)

            if (!startTime) {

                startTime = timestamp

            }

            if (timestamp - startTime >= delay) {

                fn()

                startTime = timestamp

            } else {

                timer = setTimeout(function () {

                    fn()

                }, delay)

            }

        }

        function debounce(fn, delay) {    // 定义一个debounce函数

            clearTimeout(fn.timeid)

            fn.timeid = setTimeout(function () {

                fn()

            }, delay)

        }

        window.addEventListener('resize', function () {

            throttle(commonWay, 1000);

            debounce(addlist, delay);

        })

    </script>