资讯专栏INFORMATION COLUMN

js 函数防抖和节流

Amio / 845人阅读

摘要:函数节流函数防抖总结其实函数节流和防抖都是闭包的运用,保存外部函数中的变量值,只不过节流是在多次操作中取第一次,而防抖是取多次操作中的最后一次,具体原因是因为是中的宏任务,在主线程代码执行完毕之后才会执行其中的回调方法。

函数节流

    function throttle(fn, delay = 2000) {
        let Timer = null

        return function () {

            let Now = +new Date()

            if ( Now - Timer >= delay || !Timer) {
                fn.call(this, ...arguments)
                Timer = Now
            }
        }
    }

函数防抖

    function debounce(fn, delay = 300) {
        let Timer

        return function() {
            let _arg = arguments
            let _this = this

            if (Timer) {
                clearTimeout(Timer)
            }

            Timer = setTimeout(() => {
                fn.apply(this, _arg)
            }, delay);
        }
    }

总结:

其实函数节流和防抖都是闭包的运用,保存外部函数中的变量值,只不过节流是在多次操作中取第一次,而防抖是取多次操作中的最后一次,具体原因是因为setTimeout是eventloop中的宏任务,在主线程代码执行完毕之后才会执行其中的回调方法。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102392.html

相关文章

  • 详谈js抖和节流

    摘要:本文会分别介绍什么是防抖和节流,它们的应用场景,和实现方式。防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题,比如触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。 本文由小芭乐发表 0. 引入 首先举一个例子: 模拟在输入框输入后做ajax查询请求,没有加入防抖和节流的效果,这里附上完整可执行代码: 没有防抖 ...

    shevy 评论0 收藏0
  • 彻底弄懂函数抖和函数节流

    摘要:若时间差大于间隔时间,则立刻执行一次函数。不同点函数防抖,在一段连续操作结束后,处理回调,利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次,而函数节流侧重于一段时间内只执行一次。 原博客地址,欢迎star 函数防抖和节流 函数防抖和函数节流:优化高频率执行js代码的一种手段,js中的一些事件如浏览器的resize、scroll,鼠标的mousemove、mouseover...

    Mr_houzi 评论0 收藏0
  • 函数抖和节流

    摘要:应用场景给按钮加函数防抖防止表单多次提交。对于输入框连续输入进行验证时,用函数防抖能有效减少请求次数。参考十分钟学会防抖和节流轻松理解函数节流和函数防抖 函数防抖和节流 防抖 对于触发非常频繁又没有必要每次都执行的事件,希望合并到一次去执行; 实现思路: 事件触发后,在规定的时间范围内如果事件重复触发,那么忽略之前触发的事件,并且重新开始计时,直到某一次事件触发后大于规定时间,我们才执...

    daydream 评论0 收藏0
  • JavaScript抖和节流

    摘要:概念函数防抖和函数节流,两者都是优化高频率执行代码的一种手段。防抖任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行。节流指定时间间隔内只会执行一次任务一定时间内方法只跑一次。 概念 函数防抖和函数节流,两者都是优化高频率执行js代码的一种手段。 防抖:任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行。 节流:指定时间间隔内只会执行一次任...

    DevWiki 评论0 收藏0
  • JS简单实现抖和节流

    摘要:定时器实现当触发事件的时候,我们设置一个定时器,再触发事件的时候,如果定时器存在,就不执行直到秒后,定时器执行执行函数,清空定时器,这样就可以设置下个定时器。当最后一次停止触发后,由于定时器的延迟,可能还会执行一次函数。 一、什么是防抖和节流 Ps: 比如搜索框,用户在输入的时候使用change事件去调用搜索,如果用户每一次输入都去搜索的话,那得消耗多大的服务器资源,即使你的服务器资源...

    MRZYD 评论0 收藏0
  • 浅谈js抖和节流

    摘要:防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。 防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。(信我,你看完肯定就懂了) 从滚动条监听的例子说起 先说一个常见的功能,很多网站会提供这么一个按钮:用于返回顶部。showImg(ht...

    opengps 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<