，于是我们提出这样一个「优化需求」：「触发事件，但是我一定在事件触发n秒后才执行，如果你在一个事件触发的n秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行」那么我们来动手实现我们的「第一版...可以看到执行上面的demo，我们输入值以后不触发keyup事件就会隔1秒钟蓝色div才会出现字，如果你一直触发是不会显示的等到你停止触发后的一秒后才显示 有同学可能对第一版代码觉得挺简单的，确实简单，不过我还是要啰嗦几句...」debounce函数返回的闭包函数」而不是getSearchInfo函数（「但是我们希望处理业务逻辑的getSearchInfo的this指向能够指向dom对象」），我们知道「this的指向是我最后被谁调用...，大家可以动手实现下 防抖函数的总结 ❝上面罗里吧嗦的说了一堆，实际上可以精简成两个需求 ❞ 非立即执行:，如果你在一个事件触发的n秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行 立即执行...：我不希望非要等到事件停止触发后才执行，我希望立刻执行函数，然后等到停止触发 n 秒后，才可以重新触发执行 我们可以按照「立即执行和非立即执行」这两个需求去理解我们的防抖函数 节流 throttle ❝
，就是指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。...文本编辑器实时保存，当无任何更改操作一秒后进行保存 非立即执行版 非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。...立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。...节流有两种实现： 时间戳版本 定时器版本 节流应用场景 scroll 事件，每隔一秒计算一次位置信息等 浏览器播放事件，每个一秒计算一次进度信息等 input 输入框在搜索内容时，可以控制多少s 在执行请求...**通过 timeout 的状态来达到节流的控制 ** 3总结 防抖：触发事件后，一定时间后再执行事件，可以立即执行 也可以一定时间再执行 节流：控制流量，在单位时间内只能请求一次，避免多次触发事件
[Description] 防抖(debounce) 所谓防抖，就是指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。...文本编辑器实时保存，当无任何更改操作一秒后进行保存 非立即执行版 非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。...立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。...节流有两种实现： 时间戳版本 定时器版本 节流应用场景 scroll 事件，每隔一秒计算一次位置信息等 浏览器播放事件，每个一秒计算一次进度信息等 input 输入框在搜索内容时，可以控制多少s 在执行请求...通过 timeout 的状态来达到节流的控制 总结 防抖： 触发事件后，一定时间后再执行事件，可以立即执行 也可以一定时间再执行 节流： 控制流量，在单位时间内只能请求一次，避免多次触发事件，影响服务器性能
函数防抖(debounce) 防抖：不管事件触发频率多高，一定在事件触发 n 秒后才执行，如果在一个事件执行的 n秒内又触发了这个事件，就以新的事件的时间为准，n秒后才执行，总之，触发完事件 n 秒内不再触发事件...思路： 返回一个函数； 每次触发事件时都取消之前的定时器 需要注意问题： this指向 参数的传递 是否要立即调用一次 function debounce(fn, wait, immediate) {...，而不是 debounce函数的调用者 timer = setTimeout(() => { fn.apply(this, args) }, wait...搜索输入框，在输入后200毫秒搜索 debounce(fetchSearchData, 200); 可以这样去理解记忆：函数防抖是 在事件触发 n 秒后才执行，在监听 scroll事件和 resize...函数节流(throttle) 函数节流：不管事件触发频率有多高，只在单位时间内执行一次。
什么是防抖 当事件被触发后，延迟几秒后再执行回调，如果在这几秒内事件又被触发，则重新计时。如：游戏中的回城机制，中途打断后必须要重新回城，重新读条。...应用场景 用户在输入框中连续输入一串字符时，可以通过防抖策略，只有在输入完后，才执行查询的请求，这样可以有效减少次数，节约请求资源。...(e.target.value) }) 加入了防抖后，在频繁的输入时不会发送请求，只有当在指定间隔内没有输入时，才会执行函数。...如果停止输入但是在指定间隔内又输入，会重新触发计时。...= function (e) { testThrottleFn(e, 'throttle'); // 给节流函数传参 } /** * 触发完事件 n 秒内不再触发事件，n秒后再执行 * 只执行最后一次点击
防抖（debounce) 在事件被触发 n 秒后再执行回调函数，如果在这 n 秒内又被触发，则重新计时延迟时间。...非立即执行 ”非立即执行防抖“ 指事件触发后，回调函数不会立即执行，会在延迟时间 n 秒后执行，如果 n 秒内被调用多次，则重新计时延迟时间 // e.g....', printUserName); 立即执行 “立即执行防抖” 指事件触发后，回调函数会立即执行，之后要想触发执行回调函数，需等待 n 秒延迟 // e.g....（第一次触发立即执行），“定时器”方式让函数在最后一次事件触发后（如4.2s）也能触发。...区别：“防抖”是某一时间内只执行一次，最后一次触发后过段时间执行，而“节流”则是间隔时间执行，间隔时间固定。
概念和例子 函数防抖(debounce) 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 看一个?...就很好的解释了，如果在时间间隔内执行函数，会重新触发计时。biu会在第一次1.5s执行后，每隔1s执行一次，而boom一次也不会执行。...个人理解 函数节流就是fps游戏的射速，就算一直按着鼠标射击，也只会在规定射速内射出子弹。 总结 函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。...函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。 结合应用场景 debounce search搜索联想，用户在不断输入值时，用防抖来节约请求资源。...debounce函数防抖，而不是函数节流，很多文章也都会拿这段代码来做例子，函数本身没错，但是命名错了。
浏览器的一些事件，如：resize，scroll，keydown，keyup，keypress，mousemove等。这些事件触发频率太过频繁，绑定在这些事件上的回调函数会不停的被调用。...(handle, 1000)) 代码解释：先执行debounce(handle, 1000)返回一个匿名函数，然后监听scroll事件，执行匿名函数，设置一个1秒后执行handle函数的定时器，由于scroll...是不断触发的，如果第一次触发与第二次触发间隔1秒或者1秒多，第一次触发scroll会执行handle函数，在控制台上会打印12，如果间隔小于1秒，因为setTimeout(fn, wait)是要在1秒后执行...handle 函数，小于1秒就不执行handle函数，但是timeout定时器已经不为空，第二次scroll滚动触发debounce时就执行clearTimeout(timeout)，并且执行下面的代码...，每隔一定时间（如200ms）执行一次事件处理函数 先执行throttle(handle, 1000)返回一个匿名函数，然后触发scroll事件时执行返回的匿名函数，即未滚动的时候已经执行了throttle
防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。...防抖（debounce） 1.1 什么是防抖 在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。...2.2 应用场景 (1)鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次； (2)在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据...小结 总结下防抖和节流的区别： -- 效果： 函数防抖是某一段时间内只执行一次；而函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。...-- 原理： 防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。
概念和例子 函数防抖(debounce) 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。...biu会在第一次1.5s执行后，每隔1s执行一次，而boom一次也不会执行。...个人理解 函数节流就是fps游戏的射速，就算一直按着鼠标射击，也只会在规定射速内射出子弹。 总结 函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。...函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。 结合应用场景 debounce search搜索联想，用户在不断输入值时，用防抖来节约请求资源。...debounce函数防抖，而不是函数节流，很多文章也都会拿这段代码来做例子，函数本身没错，但是命名错了。
该函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。...例子 // 避免在滚动时过分的更新定位 jQuery(window).on('scroll', _.throttle(updatePosition, 100)); // 点击后就调用 `renewToken...看下滚动事件的例子： 当使用触控板，滚动滚轮，或者拖拽滚动条的时候，一秒可以轻松触发30次事件。经我的测试，在智能手机上，慢慢滚动一下，一秒可以触发事件100次之多。...前缘（或者“immediate”） 你会发现，直到事件停止快速执行以后，debounce 事件才会触发相应功能。为何不立即触发呢？那样的话就跟原本的非 debounce 处理无异了。...前缘 debounce 的例子 在 underscore.js 中，选项叫 immediate ，而不是 leading： Debounce 实现 我首次看到 debounce 的 JavaScript
先说函数防抖，他的使用场景最多是在搜索时使用，比如百度的搜索，你在输入文字后的一段时间内开始自动搜索而不是每次按下键都执行一次搜索。因为如果每次按键都搜索，则会消耗大量的服务器资源。...函数防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时 来看一下下面这个例子 //模拟一段ajax请求 function ajax(content) { console.log(...最终效果就是当你在频繁的输入时，并不会发送请求，只有当你在指定间隔内没有输入时，才会执行函数。如果停止输入但是在指定间隔内又输入，会重新触发计时。...上述代码达到的效果就是：我们在不断输入时，ajax会按照我们设定的时间，每1s执行一次，效果有点类似于我们玩魂斗罗这种游戏的时候，当点下开枪按钮时，子弹会匀速打出，停止按键后，会停止射击。...应用场景 函数防抖： 1. search搜索联想，用户在不断输入值时，用防抖来节约请求资源 2. window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
假设 1 秒触发了 60 次，每个回调就必须在 1000 / 60 = 16.67ms 内完成，否则就会有卡顿出现。...防抖的原理就是：你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件...this 如果我们在 getUserAction 函数中 console.log(this)，在不使用 debounce 函数的时候，this 的值为： </div...这个需求就是： 我不希望非要等到事件停止触发后才执行，我希望立刻执行函数，然后等到停止触发 n 秒后，才可以重新触发执行。...函数，比如说我 debounce 的时间间隔是 10 秒钟，immediate 为 true，这样的话，我只有等 10 秒后才能重新触发事件，现在我希望有一个按钮，点击后，取消防抖，这样我再去触发，就可以又立刻执行啦
二、防抖案例：搜索查询 比如我们在一个表单中输入内容，JS通过监听输入框值的变化来查询搜索结果，我们会通过keyup事件来处理，当键盘弹起时就会触发keyup事件，在事件处理函数中发送请求处理查询结果。...在我们输入内容时，会频繁的触发keyup事件，然而我们并不希望太频繁触发keyup事件处理函数发送请求查询。...}, 400); }; >每次键盘抬起都会触发keyup事件，但是keyup事件需要在400ms后才会处理查询操作，所以在下次触发keyup时，时间在400ms...原理是维护一个计时器，规定在delay（延迟）时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。...，都会保证在规定时间内一定会执行一次真正的事件处理函数 防抖只是在最后一次事件后才触发一次函数。
什么是函数去抖 & 函数节流 让某个函数在一定 事件间隔条件（去抖debounce） 或 时间间隔条件（节流throttle） 下才会去执行，避免快速多次执行函数（操作DOM，加载资源等等）给内存带来大量的消耗从而一定程度上降低性能问题...换成图示我们可以这么理解： throttle使用场景 click事件（不停快速点击按钮，减少触发频次） scroll事件（返回顶部按钮出现\隐藏事件触发） keyup事件（输入框文字与显示栏内容复制同步...* @param fn 执行函数 * @param delay 时间间隔 * @param isImmediate 为true，debounce会在delay时间间隔的开始时立即调用这个函数 * @returns...该函数接收三个参数，分别是要执行的函数fn、事件完成周期时间间隔delay（即事件间隔多少时间内不再重复触发）以及是否在触发周期内立即执行isImmediate。...示例中对click事件进行了去抖，间隔时间为1000毫秒，为立即触发方式，当不停点击按钮时，第一次为立即触发，之后直到最后一次点击事件结束间隔delay秒后开始执行加1操作。
') let debounceAjax = debounce(ajax, 500) inputb.addEventListener('keyup', function (e) { debounceAjax...(e.target.value) }) 运行看结果： 可以看到，我们加入了防抖以后，当你在频繁的输入时，并不会发送请求，只有当你在指定间隔内没有输入时，才会执行函数。...(biu,500),1000) setInterval(debounce(boom,2000),1000) 这个栗子就很好的解释了，如果在时间间隔内执行函数，会重新触发计时。...biu会在第一次1.5s执行后，每隔1s执行一次，而boom一次也不会执行。...因为它的时间间隔是2s，而执行时间是1s，所以每次都会重新触发计时 继续看例子： function throttle(fun, delay) { let last, deferTimer
this是window 1.2 apply 函数 原理：和 call函数一样，就只是第三个参数是数组，而不是多个参数而已，所以不需要使用扩展运算符 ... // apply函数封装实现 function...不同的是，返回是一个函数，而不是立即调用。...解决方案：通过函数节流和函数防抖限制事件处理函数的频繁调用 1.4.1 函数节流(throttle) 在函数需要频繁触发时：函数执行一次后，经过设定的间隔后才可以执行第二次。...(debounce) 在函数需要频繁触发时：在规定时间内，只让最后一次生效，前面的不生效 适合多个事件一次相应的情况 场景：输入框实时搜索联想（keyup / input） 语法： debounce(...，直到延迟 wait毫秒后才调用 callback(即频繁触发时，只让最后一次生效) 实例： // 函数防抖 function debounce(callback, time) { let timer
节流 节流是在事件触发时，立即执行事件的目标操作逻辑，在当前事件未执行完成时，该事件再次触发时会被忽略，直到当前事件执行完成后下一次事件触发才会被执行。...按指定时间节流 按指定时间节流是在事件触发时，立即执行事件的目标操作逻辑，但在指定时间内再次触发事件会被忽略，直到指定时间后再次触发事件才会被执行。...防抖 防抖是在事件触发时，不立即执行事件的目标操作逻辑，而是延迟指定时间再执行，如果该时间内事件再次触发，则取消上一次事件的执行并重新计算延迟时间，直到指定时间内事件没有再次触发时才执行事件的目标操作。...这里为了模拟事件的耗时操作在 increase 方法里添加了一秒的延时。...，而 throttle 是一个确定的函数，这就最终解决了上述问题。
在处理诸如 resize、scroll、mousemove 和 keydown/keyup/keypress 等事件的时候，通常我们不希望这些事件太过频繁地触发，尤其是监听程序中涉及到大量的计算或者有非常耗费资源的操作...我们希望在用户停止某个操作一段时间之后才执行相应的监听函数，而不是在用户操作的过程当中，浏览器触发多少次事件，就执行多少次监听函数。...(fn, delay) { // 定时器，用来 setTimeout var timer // 返回一个函数，这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数 return...返回了一个闭包，这个闭包依然会被连续频繁地调用，但是在闭包内部，却限制了原始函数 fn 的执行，强制 fn 只在连续操作停止后只执行一次。...总结 debounce 强制函数在某段时间内只执行一次，throttle 强制函数以固定的速率执行。在处理一些高频率触发的 DOM 事件的时候，它们都能极大提高用户体验。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
