浅谈JavaScript节流与防抖

程序员文章站 2022-06-22 15:47:23

目录节流与防抖概念：区别节流实现节流函数防抖实现防抖函数防抖升级版总结节流与防抖概念：区别节流实现节流函数防抖实现防抖函数防抖升级版总结节流与防抖背景：当我们频繁去请求资源、接口等其他的时候，就会造成...

节流与防抖

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

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

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

概念：

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

区别

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

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

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

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

节流实现

解决思路：

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

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

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

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

浅谈JavaScript节流与防抖

节流函数

代码：

<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>

效果：

浅谈JavaScript节流与防抖

防抖实现

解决思路：

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

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

防抖函数

代码：

<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>

效果：

浅谈JavaScript节流与防抖

防抖升级版

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

代码：

    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)
        }
    }

效果：

浅谈JavaScript节流与防抖

总结

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

节流与防抖

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

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

概念：

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

区别

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

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

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

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

节流实现

解决思路：

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

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

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

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

浅谈JavaScript节流与防抖

节流函数

代码：

<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>

效果：

浅谈JavaScript节流与防抖

防抖实现

解决思路：

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

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

防抖函数

代码：

<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>

效果：

浅谈JavaScript节流与防抖

防抖升级版

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

代码：

    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)
        }
    }

效果：

浅谈JavaScript节流与防抖

总结

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

浅谈JavaScript节流与防抖

目录

节流与防抖

概念：

区别

节流实现

节流函数

防抖实现

防抖函数

防抖升级版

总结

节流与防抖

概念：

区别

节流实现

节流函数

防抖实现

防抖函数

防抖升级版

总结

通过实例学习React中事件节流防抖

如何解决js函数防抖、节流出现的问题

一文看懂如何简单实现节流函数和防抖函数

javascript防抖函数debounce详解

浅谈javascript构造函数与实例化对象

浅谈javascript中onbeforeunload与onunload事件

JS函数节流和防抖之间的区分和实现详解

关于防抖与节流的思考

JS实现防抖(debounce)及节流(throttle)函数的实现教程

如何解决js函数防抖、节流出现的问题