函数的防抖(debounce)

这段代码， 在灰色区域内鼠标随便移动，就会持续触发 count() 函数

这段代码， 在灰色区域内鼠标随便移动，就会持续触发 count() 函数前言

我们在平时开发的时候，会有很多场景会频繁触发事件，比如说搜索框实时发请求，onmousemove, resize, onscroll等等，有些时候，我们并不能或者不想频繁触发事件，咋办呢？这时候就应该用到函数防抖和函数节流了。

准备材料

<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;">

</div>

<script>
    var num = 1;
    var content = document.getElementById('content');
 
    function count() {
        content.innerHTML = num++;
    };
    content.onmousemove = count;
</script>

 这段代码， 在灰色区域内鼠标随便移动，就会持续触发 count() 函数导致的效果如下

 接下来我们通过防抖和节流限制频繁操作。

1.立即执行

短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。

        function debounce() {
            var timer

            return function () {

                if (timer) {
                    clearInterval(timer)
                }

                if (!timer) {
                    count()
                }

                timer = setTimeout(function () {
                    timer = undefined
                }, 500)
            }
        }
        content.onmousemove = debounce();

非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。效果如下：

 2.非立即执行版本

        function debounce() {
            var timer

            return function () {

                if (timer) {
                    clearInterval(timer)
                }

                timer = setTimeout(function () {
                    count()
                }, 500)
            }
        }
        
        content.onmousemove = debounce();

立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。效果如下：