js函数防抖与函数节流

时间: 2017-12-12阅读: 684标签: js知识

概念

有一些浏览器事件可以在很短的事件内快速触发多次,例如 调整窗口大小 或 向下滚动 页面。例如,如果将事件监听器绑定到窗口滚动事件上,并且用户继续非常快速地向下滚动页面,你的事件可能会在3秒的范围内被触发数千次。这可能会导致一些严重的性能问题,

如果在面试中讨论构建应用程序和事件,如滚动、窗口调整大小,或键盘按下的事件时,一定要提及函数防抖动和函数节流来提升页面速度和性能。

直接绑定函数到scroll事件是非常错误的决定,当用户滚动页面时,页面可能会变得非常慢甚至未响应。而函数防抖和函数节流是解决这个问题的一种方式,通过限制需要经过的事件,直至再次调用函数,在处理一些高频率触发的 DOM 事件的时候,它们都能极大提高


函数防抖

如果一个事件被频繁触发多次,并且触发的时间间隔过短,则防抖函数可以使得对应的事件处理函数只执行一次 

// debounce函数用来包裹我们的事件处理方法
function debounce(fn, delay){
    // 持久化一个定时器
    let timer = null
    
    // 闭包函数可以访问timer
    return function(){
        // 通过 this 和 arguments 获得函数的作用域和参数
        let context = this
        let args = arguments
        // 如果事件被触发,清除timer并重新开始计时
        clearTimeout(timer)
        timer = setTimeout(function() {
            fn.apply(context, args)
        }, delay)
    }
}

function foo(){
    console.log('You are scrolling!')
}

document.addEventListener('scroll', debounce(foo, 50));


函数节流

throttle 的概念理解稍微容易一些,如果一个事件被频繁触发多次,节流函数可以按照固定频率去执行对应的事件处理方法 

function throttle(fn, threshold){
    var last
    
    var timer
    
    threshold || (threshold = 250)
    
    return function(){
        let context = this
        let args = arguments
        
        var now = +new Date()
        
        if(last&&now<last+threshold){
            clearTimeout(timer)
            
            timer = setTimeout(function(){
                last = now
                fn.apply(context, args)
            },threshold)
        }else {
            last = now
            fn.apply(context, args)
        }
    }
}


 

 

链接: http://www.fly63.com/article/detial/241

JavaScript 进阶问题列表

我在我的 Instagram 上每天都会发布 JavaScript 的选择题,并且同时也会在这个仓库中发布。从基础到进阶,测试你有多了解 JavaScript,刷新你的知识,或者帮助你的 coding 面试!

JS 中的垃圾回收

对于开发者来说,JavaScript 的内存管理是自动的、无形的。我们创建的原始值、对象、函数……这一切都会占用内存。当某个东西我们不再需要时会发生什么?JavaScript 引擎如何发现它、清理它?

TS与JS中的Getters和Setter究竟有什么用?

在本文中,我们讨论了getter 和 setter 在现代 Web 开发中的实用性。它们有用吗?什么时候使用它们是有意义的?尽管我不同意 getter 和 setter 完全是一个反模式。但它们在几种情况下能带来更多的实用性。

JS中for循环的常见题型

for循环示例;让用户输入行数,使用for循环嵌套打出倒着的星星出来,行数等于用户输入的数字 ;有1,2,3,4这么4个数,能组成多少个互不相同且不含有重复数字的三位数?都是多少?

javascript:void(0)的含义

首先,void关键字是javascript当中非常重要的关键字,该操作符指定要计算或运行一个表达式,但是不返回值。语法格式:void func()、void(func())

前端基础之BOM和DOM

JavaScript分为 : ECMAScript,DOM,BOM。BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。DOM (Document Object Model)是指文档对象模型

解密JavaScript执行上下文

首先我们先了解一下什么是执行上下文栈(Execution context stack)。分别展示了栈、堆和队列,其中栈就是我们所说的执行上下文栈;堆是用于存储对象这种复杂类型,我们复制对象的地址引用就是这个堆内存的地址

javascript中的依赖注入

使用没有依赖的模块,显然这是很难实现的。即使你创建了很好的像黑盒一样的组件,但总有个将所有部分合并起来的地方。这就是依赖注入起作用的地方,当前来看,高效管理依赖的能力是迫切需要的,本文总结了原作者对这个问题的看法。

js中&与&&,|与||的区别

&、|、~都是位操作符,而&&、|、~|都是逻辑操作!。&&是逻辑与运算符假前真后,||是逻辑或运算符真前假后,&是按位与操作两个数值的个位分别相与,同时为1才得1,只要一个为0就为0。

Js常用基础算法

冒泡排序;插入排序 过程就像你拿到一副扑克牌然后对它排序一样;快速排序;回文字符串;翻转字符串;字符串中出现最多次数的字符;数组去重;二分查找

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全