• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

浅谈JavaScript节流与防抖

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

节流与防抖

背景:当我们频繁去请求资源、接口等其他的时候,就会造成操作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)
        }
    }

效果:

总结

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue中 this.$set的使用详解发布时间:2022-02-05
下一篇:
详解Vue-router嵌套路由发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap