js 防抖节流函数

js 防抖节流函数

防抖(debounce)

在前端开发中用户会频繁的触发事件执行,会消耗资源，会导致浏览器卡顿或者服务器崩溃。
例如 : 搜索引擎 发送关键字给服务器，若是用户打错或打多关键字，引擎都会立马发送给服务器，这就会造成连续访问伏虎器导致服务器崩溃。防抖函数则要避免该情况发生，在用户输入完关键字之后延时一段时间在发送请求。

 <input type="text" id="ipt">
    <script>
        // 获取输入框
        var ipt = document.getElementById("ipt");
        // 创建一个定时器
        var timer;
        // ipt上添加oninput事件 
        ipt.oninput = fd(function(){
            // 打印 输入框内容
            console.log(this.value);
        },1000)
        // 封装一个函数
         function fd(fn,delay){
           return function(){
               // 清除上一个定时器
               clearTimeout(timer);
               // 创建变量 this指向ipt
               var self = this;
               timer = setTimeout(function(){
                   fn.call(self);
               },delay)
           }
        }
    </script>

节流(throttle)

例如：疯狂抢购点击，解决方法：点击的时候 在一定的时间段内，只能点击一次。

 <div id="div">0</div>
    <button id="btn">start</button>
    <script>
        // 获取按钮
        var btn = document.getElementById('btn');
        // 获取div
        var div = document.getElementById('div');
        // 设置一个接受 完成按钮之后的时间值 的变量
        var nowTime = 0;
        // 添加按钮的点击事件fd  传入延时时间值
        btn.onclick = fd(function(){
            // 点击之后div里面的数字加一
            div.innerHTML = Number(div.innerHTML) + 1;
        },1000);
        // 封装一个点击时间的方法
        function fd(fn, delay){
                // 返回一个函数
                return function () {
                    // 设置一个接受 按钮开始的时间值 的变量
                    var newDate = +new Date();
                    // 设置 this指向 的变量
                    var self = this;
                    if (newDate - nowTime > delay) {
                        fn.call(self);
                        nowTime = newDate;
                    }
                }
            }
    </script>