浏览器的一些事件,如:resize,scroll,keydown,keyup,keypress,mousemove等。这些事件触发频率太过频繁,绑定在这些事件上的回调函数会不停的被调用。会加重浏览器的负担,导致用户体验非常糟糕,不知哪个大神发明了防抖和节流,用来控制回调函数的次数。
比如我们的「百度搜索」,搜索的时候有关键字的提醒,关键字的来源来自于客户端向服务端请求得到的数据,我们通过「keyup事件」去监听触发请求,如果返回值的搜索key已经不是搜索框现在的值,就丢弃掉这次返回,于是我们提出这样一个「优化需求」:「触发事件,但是我一定在事件触发n秒后才执行,如果你在一个事件触发的n秒内又触发了这个事件,那我就以新的事件的时间为准,n 秒后才执行」那么我们来动手实现我们的「第一版」的防抖函数吧:
window 的 resize、scroll mousedown、mousemove keyup、keydown ……
今天为大家带来一篇JS重难点的知识体系,这也是前端高薪必备的重难点知识,而且防抖与节流在各大企业前端面试过程中经常会考到的高频面试题!
据说阿里有一道面试题就是谈谈函数节流和函数防抖。 糟了,这可触碰到我的知识盲区了,好像听也没听过这2个东西,痛定思痛,赶紧学习学习。here we go!
作者:前端林子 https://cloud.tencent.com/developer/article/1380512
先说函数防抖,他的使用场景最多是在搜索时使用,比如百度的搜索,你在输入文字后的一段时间内开始自动搜索而不是每次按下键都执行一次搜索。因为如果每次按键都搜索,则会消耗大量的服务器资源。
函数防抖是某一段时间内只执行一次;而函数节流是间隔时间执行,不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数。
https://github.com/mqyqingfeng/Blog/issues/26
节流:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
当事件被触发后,延迟几秒后再执行回调,如果在这几秒内事件又被触发,则重新计时。如:游戏中的回城机制,中途打断后必须要重新回城,重新读条。
防抖:不管事件触发频率多高,一定在事件触发 n 秒后才执行,如果在一个事件执行的 n秒内又触发了这个事件,就以新的事件的时间为准,n秒后才执行,总之,触发完事件 n 秒内不再触发事件,n秒后再执行。
1. 防抖(debounce):触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间 举例:就好像在百度搜索时,每次输入之后都有联想词弹出,这个控制联想词的方法就不可能是输入框内容一改变就触发的,他一定是当你结束输入一段时间之后才会触发。 2.节流(throttle):高频事件触发,但在 n 秒内只会执行一次,所以节流会稀释函数的执行频率 举例:预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时,你不断点刷新点购买,可是总有一段时间你点上是没有效果,这里就用到了节流,就是怕点的太快导致系统出现bug。
函数防抖(debounce)当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
当用户频繁的与UI界面操作交互时,例如:窗口调整(触发resize),页面滚动,上拉加载(触发scroll),表单的按钮提交,商城抢购疯狂的点击(触发mousedown),而实时的搜索(keyup,input),拖拽等
https://www.lodashjs.com/docs/lodash.throttle
区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。
让某个函数在一定 事件间隔条件(去抖debounce) 或 时间间隔条件(节流throttle) 下才会去执行,避免快速多次执行函数(操作DOM,加载资源等等)给内存带来大量的消耗从而一定程度上降低性能问题。
debounce: 接收一个返回Observable的方法,可以传入interval,timer等 debounce会根舍弃掉在两次输出之间小于指定时间的发出值。 debounceTime: 接收毫秒数,舍弃掉在两次输出之间小于指定时间的发出值。 适用场景:搜索栏输入关键词请求后台拿数据,防止频繁发请求。 debounceTime 比 debounce 使用更频繁
概念 防抖:就是一定时间内,只会执行最后一次任务; 节流:就是一定时间内,只执行一次 ; 先看一个例子(上代码): //模拟 ajax 请求 function ajax(content) { console.log('ajax request ' + content) } let inputa = document.getElementById('unDebounce') inputa.addEventListener('keyup', function (e) { ajax(e.targe
props与state都是用于组件存储数据的一js对象,前者是对外暴露数据接口,后者是对内组件的状态,它们决定了UI界面显示形态,而若想要用户与界面有些交互动作
问题提出: 假如你要提交一个表单,你点击了按钮,出发了提交操作。这时候,你的网络不太好,提交的请求还没得到返回的时候,你又点击了一次按钮,提交了两次,怎么办,又点击了一下,提交了三次,怎么办?
你可能会遇到这种的情况,一个站点使用自动填充的文本框,内容的拖拽,效果的滚动。那么,你遇到防抖和截流的概率还是很高的。为了使得这些操作,比如自动填充能够顺畅工作,你需要引入防抖和截流功能。
在处理诸如 resize、scroll、mousemove 和 keydown/keyup/keypress 等事件的时候,通常我们不希望这些事件太过频繁地触发,尤其是监听程序中涉及到大量的计算或者有非常耗费资源的操作。
https://github.com/ZengLingYong/Blog/issues/21
有一些浏览器事件我们不希望它很频繁的触发,如调整窗口大小(onresize)、监听滚动条滚动(onscroll),如果这些监听事件需要调用接口的话一秒内可能会调用上百次,这样坑定是有问题的。
之所以返回一个函数,因为防抖本身更像是一个函数修饰,所以就做了一次函数柯里化。里面也用到了闭包,闭包的变量是timer。
一般在项目中我们会对input、scroll、resize等事件进行节流控制,防止事件过多触发,减少资源消耗;在vue的官网的例子中就有关于lodash的debounce方法的使用,当时也提到了throttle,但一直没搞明白节流 throttle 与 去抖 debounce具体区别在哪里,所以花了点时间来搞清楚。
「原理:」 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。「适用场景:」
原文 https://www.cnblogs.com/chenqf/p/7986725.html
防抖和节流是两个JS中的概念,它们被广泛应用于被频繁触发的事件中,如搜索框在输入时会弹出候选列表:如果每次输入都发送一个AJAX请求来获取数据,那么后台就要被刷爆了。所以,这里就引出了本文要介绍的概念。
这道题,我相信很多前端从业者都知道,它本质上来说并不复杂,但是却可以有很深远的扩展,最终核心的主题其实就是异步的执行,其中对于题目的解法,还涉及到一些作用域的知识。那么我们以最简版的题目入手,逐步深入,一点点的剖开这道题所涉及到的知识概念和体系。
var vm = new Vue({ el : '#app', data: { id : 1, index : 0, name : 'Vue', avatar : 'http://……' count : [1, 2, 3, 4, 5] names : ['Vue1.0', 'Vue2.0'], items : [ { name : 'Vue1.0', version : '1.0' }, { name : 'Vue1.1
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
前端开发中会遇到一些频繁的事件触发,像是resize、scroll、mousedown、mousemove、keyup、keydown等。
链接:https://segmentfault.com/a/1190000038475001
在2011年,Twitter网站曾爆出一个问题:在主页往下滚动时,页面会变得缓慢以致没有响应。John Resig发表了一篇文章《 a blog post about the problem》指出直接在scroll事件上面绑定高消耗的事件是一个多么愚蠢的想法。现在项目中大家都会对类似的scroll或者resize事件都进行了节流控制,下述是我们经常用到,也是《JavaScript高级程序设计》- JavaScript高级技巧中提及的节流方式。
在应用开发过程中经常会遇到因用户短时间内连续多次重复触发某个事件,导致对应事件的业务逻辑重复执行而出现业务异常,此时就需要对事件进行节流或者防抖处理避免出现业务异常。本文将介绍在 Flutter 开发中如何实现节流和防抖的统一封装。
函数节流和去抖的出现场景,一般都伴随着客户端 DOM 的事件监听。举个例子,实现一个原生的拖拽功能(不能用 H5 Drag&Drop API),需要一路监听 mousemove 事件,在回调中获取元素当前位置,然后重置 dom 的位置(样式改变)。如果我们不加以控制,每移动一定像素而触发的回调数量是会非常惊人的,回调中又伴随着 DOM 操作,继而引发浏览器的重排与重绘,性能差的浏览器可能就会直接假死,这样的用户体验是非常糟糕的。我们需要做的是降低触发回调的频率,比如让它 500ms 触发一次,或者 200m
防抖函数,我们需要做的是在一件事触发的时候设置一个定时器使事件延迟发生,在定时器期间事件再次触发的话则清除重置定时器,直到定时器到时仍不被清除,事件才真正发生。
Contents 1 应用场景 2 防抖函数的封装 3 节流函数的封装 应用场景 实际工作中,我们经常性的会通过监听某些事件完成对应的需求,比如: 通过监听 scroll 事件,检测滚动位置,根据滚动位置显示返回顶部按钮 通过监听 resize 事件,对某些自适应页面调整DOM的渲染(通过CSS实现的自适应不再此范围内) 通过监听 keyup 事件,监听文字输入并调用接口进行模糊匹配 … 防抖函数的封装 定义:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行。 原理:对处理函数进行
领取专属 10元无门槛券
手把手带您无忧上云