JS：防抖与节流的实现

应用场景：

防抖与节流在我们的日常开发中经常会遇到，我们可以看一下大概的应用场景：

防抖：

1.输入框做远程搜索时，用户不断的输入内容，我们可以用防抖来节约请求的资源；

2.window触发resize时，我们可以通过防抖来保证只在用户停止拖拽的时候触发相应的方法；

3.可以用来防止按钮的重复提交。

节流：

1.鼠标不断的点击触发click,保证单位时间内只触发一次；

2.监听滚动事件，判断是否滑动到底部自动加载更多。

区别：

防抖是在用户频繁操作时，操作间隙大于等待时间才执行下一次；

节流是用户频繁操作过程中，在单位时间内，周期性的执行函数；

代码实现：

防抖：

第一种实现方式：用户操作停止后

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>防抖</title>
    <style>
        #main{
            height: 100px;
            background-color: #333;
        }
    </style>
</head>

<body>
    <div id="main">
    </div>
    <script>
        var count = 0;
        function add(){
            count++;
            console.log(count)
            console.log(this)
        }                
        var main = document.getElementById("main");
        main.onmousemove = debounce(add, 1000);
        // 防抖  
        function debounce(func, wait){
            var timeout;
            return function(){
                var self = this;   //因为apply会改变this的指向性
                clearTimeout(timeout)
                 timeout = setTimeout(function(){
                     // setTimeout属于window对象
                     // 直接使用func.apply(this) 会在add函数里面改变this为window,这里也可以用ES6的箭头函数
                     func.apply(self)
                 },wait)
            }
        }
   
    </script>
</body>

</html>

效果：鼠标持续移动结束后等待1秒，执行函数

JS：防抖与节流的实现

第二种：鼠标初次滑动就执行一次函数

     function debounce(func, wait){
            var timeout;
            return function(){
                //这里对this的指向性进行一个存储
                var self = this;
                clearTimeout(timeout)
                    var callNow = !timeout;
                    timeout = setTimeout(function(){
                        timeout = null;
                    },wait)
                    if(callNow){
                        func.apply(self)
                    }
              
            }
        }

JS：防抖与节流的实现

节流：

    function throttle(func, wait){
            var prexious = 0;  //用作标记
            return function(){
                var self = this;
                var now = +new Date();  
                if(now - prexious > wait){
                    func.apply(self);   
                    prexious = now;
                }
            }
        }

效果展示：在频繁操作的过程中，每隔1秒执行一次函数

JS：防抖与节流的实现

JS：防抖与节流的实现

相关推荐