防抖的概念

防抖又叫为函数防抖（debounce）：指触发事件后，在n秒内函数只能执行一次，如果触发事件后在n秒内又触发了事件，则会重新计算函数延执行时间。

前端开发中，常见的事件如，onresize，scroll，mousemove ,mousehover 等会短时间内多次触发（频繁触发），不做限制的话可能一秒执行几百次，在这些函数内部如果还执行了其他函数，尤其是执行了操作 DOM 的函数的话（浏览器操作DOM是很耗费性能的），那不仅会浪费计算机资源，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。

防抖的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height: 30px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // 函数防抖:无论事件执行了多少次  都只会在最后一次等待多久执行一次    电梯进人
        // 应用的场景：一些比较频繁事件
        var clock;
        document.querySelector('.box').addEventListener('mouseenter',function(){
            clearTimeout(clock);
            clock = setTimeout(function(){
                console.log('鼠标移入进来了');
            },1000)
        })
        /* document.querySelector('.box').addEventListener('mouseleave',function(){
            console.log('鼠标移出进来了');
        }) */
    </script>
</body>
</html>

节流概念

函数节流就是针对调用频率高的函数，通过设置定时器，使其在执行后间隔一段时间，才进行下一次的执行，避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。
最常见的一些需要节流的事件：onresize，scroll，mousemove ,mousehover，因为这些事件会在页面中频繁被触发

节流的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#">点击</a>
    <script>
        // 函数节流:在固定的事件中只做一件事


        function fun(fn,timer){
            var flage = false;
            // event 事件对象  记录你事件发生的一些详细信息
            return function(event){
                if(flage) return;
                flage = true;
                setTimeout(function(){
                    fn(event)
                    flage = false;
                },timer)
            }
        }
        function fn(e){
            console.log(e)
        }
        window.addEventListener('resize',fun(fn,2000))
    </script>
</body>
</html>

防抖和节流的区别

防抖只会在最后一次事件后执行触发函数，节流不管事件多么的频繁，都会保证在规定时间段内触发事件函数。

js之防抖和节流

防抖的概念

防抖的实现

节流概念

节流的实现

防抖和节流的区别