资讯专栏INFORMATION COLUMN

节流函数

My_Oh_My / 2724人阅读

摘要:概念解读函数节流是指一定时间内方法只跑一次。应用场景鼠标不断点击触发,单位时间内只触发一次。监听滚动事件它是一个高频触发对事件,比如是否滑到底部自动加载更多,用来判断。

概念解读

函数节流是指一定时间内js方法只跑一次。
生活例子:人的眨眼睛,就是一定时间内眨一次。

应用场景:

1、鼠标不断点击触发,mousedown(单位时间内只触发一次)。
2、监听滚动事件(它是一个高频触发对事件),比如是否滑到底部自动加载更多,用throttle来判断。

函数:
function throttle(fun, delay) {
    let last, deferTimer
    return function (args) {
        let that = this
        let _args = arguments
        let now = +new Date()
        if (last && now < last + delay) {
            clearTimeout(deferTimer)
            deferTimer = setTimeout(function () {
                last = now
                fun.apply(that, _args)
            }, delay)
        }else {
            last = now
            fun.apply(that,_args)
        }
    }
}

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

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

相关文章

  • 彻底弄懂函数防抖和函数节流

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

    Mr_houzi 评论0 收藏0
  • JS进阶篇--JS函数节流(throttle)

    摘要:函数节流的原理函数节流的原理挺简单的,估计大家都想到了,那就是定时器。在高级程序设计一书有介绍函数节流,里面封装了这样一个函数节流函数,它把定时器存为函数的一个属性个人的世界观不喜欢这种写法。 什么是函数节流? 介绍前,先说下背景。在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱...

    cpupro 评论0 收藏0
  • JavaScript 函数节流函数去抖应用场景辨析

    摘要:函数节流和去抖的出现场景,一般都伴随着客户端的事件监听。函数节流的核心是,让一个函数不要执行得太频繁,减少一些过快的调用来节流。 概述 也是好久没更新 源码解读,看着房价蹭蹭暴涨,心里也是五味杂陈,对未来充满恐惧和迷茫 ...(敢问一句你们上岸了吗) 言归正传,今天要介绍的是 underscore 中两个重要的方法,函数节流和函数去抖。这篇文章不会涉及具体的代码实现(关于代码实现请期...

    ZHAO_ 评论0 收藏0
  • 函数防抖Debounce和函数节流Throttle

    摘要:函数节流函数防抖函数节流和函数防抖函数节流和函数防抖二者很容易被混淆起来。函数防抖函数在特定的时间内不被再调用后执行。一句话概括函数节流是从用户开始输入就开始计时,而函数节流是从用户停止输入开始计时。 函数节流 & 函数防抖 函数节流和函数防抖 函数节流和函数防抖二者很容易被混淆起来。下面贴英文原文,建议认真阅读:Debouncing enforces that a function ...

    NicolasHe 评论0 收藏0
  • 谈谈js中的函数节流

    摘要:为了解决这些问题,就可以使用定时器对函数进行节流。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。 函数节流的目的 从字面上就可以理解,函数节流就是用来节流函数从而一定程度上优化性能的。例如,DOM 操作比起非DOM 交互需要更多的内存和CPU 时间。连续尝试进行过多的DOM 相关操作可能会导致浏览器挂起,有时候甚...

    sanyang 评论0 收藏0
  • 前端进击的巨人(八):浅谈函数防抖与节流

    摘要:隆重请出主角防抖与节流。防抖与节流的异同相同都是防止某一时间段内,函数被频繁调用执行,通过时间频率控制,减少回调函数执行次数,来实现相关性能优化。参考文章分钟理解的节流防抖及使用场景函数防抖和节流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇课题,或许早已是烂大街的解读文章。不过春招系列面试下来,不少伙伴们还...

    _Zhao 评论0 收藏0

发表评论

0条评论

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