throttle的实现

什么是throttle，直接翻译就是节流的意思，打个比方，比如说中国的三峡大坝，闸门每一分钟打开一次，那么水就是一分钟流一下。在我们的应用中一般用在需要降低频率的地方，比如说：

window的onresize，窗口变化时时触发onresize方法，如果我们在onresize做一些dom的操作，显然会大大降低浏览器的性能，所以我们可以降低触发onresize的频率来得以控制。
抢票软件的抢票功能（比如支付宝的抢券），用户连续点击抢票按钮发送http请求到后台，每点击一次按钮发送一次请求，会加剧后台的并发性问题，显然不合理，所以要降低访问的频率。
window的onscroll滚动事件

节流是指阻止一个函数在很短时间内的重复调用，必须在超过规定时间间隔后才能重复调用的过程。

第一次调用，立即执行。
重复调用，如果超过规定时间，立即执行。
重复调用，小于规定时间，阻止上一次的调用，重新设置调用定时器。

根据上面的三个步骤，实现代码如下：

function throttle(fn, delay = 1000) {var context;var args;var timer;var prev;var now;function exec() {fn.apply(context, args);prev = now;}return function () {context = this;args = arguments;if (timer) {clearTimeout(timer);timer = null;}if (!prev) {exec();}now = new Date();if (now - prev >= delay) {exec();} else {timer = setTimeout(function () {exec();}, delay);}}
}

例子：

var test = throttle(function () {

console.log("90")

});

test();test();

结果：打印90，延迟1s后打印90；

参考链接：https://github.com/lodash/lodash/blob/master/throttle.js

throttle的实现相关推荐

throttle与debounce的区别
前几天看到一篇文章,我的公众号里也分享了<一次发现underscore源码bug的经历以及对学术界拿来主义的思考>具体文章详见,微信公众号: 文中讲了大家对throttle和debounc ...
每日源码分析 - lodash(debounce.js和throttle.js)
本系列使用 lodash 4.17.4 前言本文件引用了isObject函数 import isObject from './isObject.js' 判断变量是否是广义的对象(对象.数组.函数), ...
节流函数(throttle)的原理
throttle节流函数,就是一个函数调用的频率控制器: var safe = true; function throttle() {if (safe) {lazyLoad();safe = fals ...
探究防抖(debounce)和节流(throttle)
本文来自我的博客,欢迎大家去GitHub上star我的博客本文从防抖和节流出发,分析它们的特性,并拓展一种特殊的节流方式requestAnimationFrame,最后对lodash中的deboun ...
函数防抖Debounce和函数节流Throttle
函数节流 & 函数防抖函数节流和函数防抖函数节流和函数防抖二者很容易被混淆起来.下面贴英文原文,建议认真阅读: Debouncing enforces that a function no ...
Java版的防抖(debounce)和节流(throttle)
概念防抖(debounce) 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时节流(throttle) 当持续触发事件时, ...
iOS编程中throttle那些事
不知道大家对throttle这个单词是否看着眼熟,还是说对这个计算机基础概念有很清晰的了解了.今天就来聊聊和throttle相关的一些技术场景. 定义我经常有一种感觉,对于英语这门语言的语感,会影响 ...
事件触发控制_前端性能优化：事件的节流throttle与防抖debounce
scroll 事件是一个非常容易被反复触发的事件,另外,resize 事件.鼠标事件(比如 mousemove.mouseover 等).键盘事件(keyup.keydown 等)都存在被频繁触发的风 ...
JavaScript函数节流(throttle)与函数去抖(debounce)解析与应用举例
概念函数防抖(debounce): 事件响应函数在一段时间后才会执行,如果在这段时间内再次调用,则重新计算执行时间:当预定时间内没有再次调用该函数,则执行响应逻辑. 函数节流(throttle): ...
JavaScript 节流函数 Throttle 详解
在浏览器 DOM 事件里面,有一些事件会随着用户的操作不间断触发.比如:重新调整浏览器窗口大小(resize),浏览器页面滚动(scroll),鼠标移动 (mousemove).也就是说用户在触发这些 ...

throttle的实现

throttle的实现相关推荐

最新文章

热门文章