节流与防抖

背景：当我们频繁去请求资源、接口等其他的时候，就会造成操作Dom频繁，接口压力大等等，性能下降。比如我有时候会每次搜索会猛地敲回车，在网络不很好的时候，点击下一页按钮的时候也会一直点，可能网络不好也可能服务器性能低。

为了避免频繁触发同一事件或请求，这时候就要用到节流和防抖了。

what？这是啥？当我第一次听到这两个名字的时候，心想是指节省流量、防止手抖吗。百思不得其解，赶紧就去学习。

概念：

简单来说：节流和防抖就是为了防止事件在短时间内多次触发的两种解决方案。都是用过减少请求的次数，来降低压力，提高性能。

区别

节流：在一定的时间内只会请求一次。

可以理解为：公交车，每个人是一次点击请求，每十分钟开一趟车，发送请求

防抖：触发事件后n秒后才能执行函数，如果在n秒内触发了事件，则会重新计算执行时间。

比如在一段时间内，我一直点击按钮，以最后一次点击为准发送一次请求。

节流实现

解决思路 ：

使用时间戳（发生在一段时间的开始），就是在计算

当前点击的时间 - 上一次执行函数的时间 > 我设定的时间戳 ，就执行一次函数

缺点：第一次直接触发 最后一次一段时间内无法触发

给一个场景，当我们搜索数据的时候，发起请求，没有做处理是这样的，请求肯定太过于频繁

节流函数

代码：

<body>
    <div>
        <span>节流处理</span><input id="input" type="text">
        <button id="btn">请求</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", throttle(output, 1000))  //添加点击事件监听
    function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value)  //模拟发起一次请求
    }
//节流函数
    function throttle(fn, delay) {  // fn为执行的函数，delay为延迟时间
        var last = 0;  //上一次结束的时间
        return function () {
            var cur = Date.now()
            console.log(cur-last)
            if (cur - last > delay) {
                fn.apply(this, arguments)  //执行函数
                last = cur //更新上一次时间
            }
        }
    }
</script>

效果：

防抖实现

解决思路 ：

定时器（发生在定时结束）。缺点：第一次不触发 最后一次延迟触发

就是设置一个定时器，如果一直点击则清除定时器，最后一次开启定时器

防抖函数

代码：

<body>
    <div>
        <span>防抖处理</span><input id="input" type="text">
        <button id="btn">请求</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", debounce(output, 1000))  //添加点击事件监听
    function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value)  //模拟发起一次请求
    }
    function debounce(fn, delay) {  // fn为执行的函数，delay为延迟时间
        var time = null;  //定时器
        return function () {
            clearTimeout(time);  //清除定时器
            let context = this;  //获取当前button上下文 如果不指定，箭头函数就会一直往外找到window
            let args = arguments;
            time = setTimeout(() => {
                fn.apply(context, args);
            }, delay);
        }
    }
</script>

效果：

防抖升级版

第一次触发和最后一次延迟触发

代码：

    function throttle(fn, delay) {  // fn为执行的函数，delay为延迟时间
        let time = null
        let flag=true  //标识是不是第一次触发
        return function () {
            clearTimeout(time)
            if (flag) { 
                fn.apply(this, arguments)
                flag=false
            }
            time = setTimeout(() => {  //触发定时器
                fn.apply(this, arguments)
                flag=true
            }, delay)
        }
    }

效果：

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

节流与防抖

背景：当我们频繁去请求资源、接口等其他的时候，就会造成操作Dom频繁，接口压力大等等，性能下降。比如我有时候会每次搜索会猛地敲回车，在网络不很好的时候，点击下一页按钮的时候也会一直点，可能网络不好也可能服务器性能低。

为了避免频繁触发同一事件或请求，这时候就要用到节流和防抖了。

what？这是啥？当我第一次听到这两个名字的时候，心想是指节省流量、防止手抖吗。百思不得其解，赶紧就去学习。

概念：

简单来说：节流和防抖就是为了防止事件在短时间内多次触发的两种解决方案。都是用过减少请求的次数，来降低压力，提高性能。

区别

节流：在一定的时间内只会请求一次。

可以理解为：公交车，每个人是一次点击请求，每十分钟开一趟车，发送请求

防抖：触发事件后n秒后才能执行函数，如果在n秒内触发了事件，则会重新计算执行时间。

比如在一段时间内，我一直点击按钮，以最后一次点击为准发送一次请求。

节流实现

解决思路 ：

使用时间戳（发生在一段时间的开始），就是在计算

当前点击的时间 - 上一次执行函数的时间 > 我设定的时间戳 ，就执行一次函数

缺点：第一次直接触发 最后一次一段时间内无法触发

给一个场景，当我们搜索数据的时候，发起请求，没有做处理是这样的，请求肯定太过于频繁

节流函数

代码：

<body>
    <div>
        <span>节流处理</span><input id="input" type="text">
        <button id="btn">请求</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", throttle(output, 1000))  //添加点击事件监听
    function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value)  //模拟发起一次请求
    }
//节流函数
    function throttle(fn, delay) {  // fn为执行的函数，delay为延迟时间
        var last = 0;  //上一次结束的时间
        return function () {
            var cur = Date.now()
            console.log(cur-last)
            if (cur - last > delay) {
                fn.apply(this, arguments)  //执行函数
                last = cur //更新上一次时间
            }
        }
    }
</script>

效果：

防抖实现

解决思路 ：

定时器（发生在定时结束）。缺点：第一次不触发 最后一次延迟触发

就是设置一个定时器，如果一直点击则清除定时器，最后一次开启定时器

防抖函数

代码：

<body>
    <div>
        <span>防抖处理</span><input id="input" type="text">
        <button id="btn">请求</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", debounce(output, 1000))  //添加点击事件监听
    function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value)  //模拟发起一次请求
    }
    function debounce(fn, delay) {  // fn为执行的函数，delay为延迟时间
        var time = null;  //定时器
        return function () {
            clearTimeout(time);  //清除定时器
            let context = this;  //获取当前button上下文 如果不指定，箭头函数就会一直往外找到window
            let args = arguments;
            time = setTimeout(() => {
                fn.apply(context, args);
            }, delay);
        }
    }
</script>

效果：

防抖升级版

第一次触发和最后一次延迟触发

代码：

    function throttle(fn, delay) {  // fn为执行的函数，delay为延迟时间
        let time = null
        let flag=true  //标识是不是第一次触发
        return function () {
            clearTimeout(time)
            if (flag) { 
                fn.apply(this, arguments)
                flag=false
            }
            time = setTimeout(() => {  //触发定时器
                fn.apply(this, arguments)
                flag=true
            }, delay)
        }
    }

效果：

总结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 如何用JS实现画笔的功能，代码是什么

  JavaScript实现鼠标移动事件画笔 JavaScript实现鼠标移动事件画笔小游戏,供大家参考,具体内容如下 实现功能 鼠标点击时可以在画板上画画如果鼠标双击那么停止移动进画板颜色改变移除时颜色改变 <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" content=" ...

• 如何理解Node.js的模块系统，涉及哪些知识点

  转自：https://www.cnblogs.com/blog-cxj2017522/p/7071840.htmlNodejs有一个简单的模块加载系统。在Nodejs中，文件和模块是一一对应的（每个文件被视为一个独立的模块），这个文件可能是JavaScript代码，JSON或编译过的C/C++扩展，例如：/***foo.js*将这个js文件导出为模块*/exp

• JS中进行判断浏览器在什么环境打开的方法是什么

  js判断在哪个浏览器打开项目的方法,通过以下方法判断浏览器

• JS箭头函数语法是什么，有哪些要注意的错误

  本文可以让你了解所有有关JavaScript箭头函数的信息。我们将告诉你如何使用ES6的箭头语法，以及在代码中使用箭头函数时需要注意的一些常见错误。你会看到很多例子来说明它们是如何工作的。

• JS手写数组的常用函数有哪些？如何使用？

  JS手写数组的常用函数有哪些？JS手写数组的常用函数有很多，例如forEach 函数、filter 函数、find 函数、findIndex 函数等等，本文就给大家简单的介绍一下他们的使用，感兴趣的朋友就继续往下看吧。