lodash源码学习debounce,throttle
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了lodash源码学习debounce,throttle相关的知识,希望对你有一定的参考价值。
函数去抖(debounce)和函数节流(throttle)通常是用于优化浏览器中频繁触发的事件,具体内容可以看这篇文章http://www.cnblogs.com/fsjohnhuang/p/4147810.html
直接看lodash中对应方法的实现
_.debounce(func, [wait=0], [options={}])
//debounce.js var isObject = require(‘./isObject‘),//是否是对象 now = require(‘./now‘),//获取当前时间 toNumber = require(‘./toNumber‘);//转为为数字 var FUNC_ERROR_TEXT = ‘Expected a function‘; var nativeMax = Math.max,//原生最大值方法 nativeMin = Math.min;//原生最小值方法 /** * 函数去抖,也就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。 * * @param {Function} func 需要去抖的函数. * @param {number} [wait=0] 延迟执行的时间. * @param {Object} [options={}] 选项对象. * @param {boolean} [options.leading=false] 指定是否在超时前调用. * @param {number} [options.maxWait] func延迟调用的最大时间. * @param {boolean} [options.trailing=true] 指定是否在超时后调用. * @returns {Function} 返回去抖之后的函数. * @example * * // Avoid costly calculations while the window size is in flux. * jQuery(window).on(‘resize‘, _.debounce(calculateLayout, 150)); * * // Invoke `sendMail` when clicked, debouncing subsequent calls. * jQuery(element).on(‘click‘, _.debounce(sendMail, 300, { * ‘leading‘: true, * ‘trailing‘: false * })); * * // Ensure `batchLog` is invoked once after 1 second of debounced calls. * var debounced = _.debounce(batchLog, 250, { ‘maxWait‘: 1000 }); * var source = new EventSource(‘/stream‘); * jQuery(source).on(‘message‘, debounced); * * // Cancel the trailing debounced invocation. * jQuery(window).on(‘popstate‘, debounced.cancel); */ function debounce(func, wait, options) { var lastArgs, //上次调用参数 lastThis, //上次调用this maxWait, //最大等待时间 result, //返回结果 timerId, //timerId lastCallTime, //上次调用debounced时间,即触发时间,不一定会调用func lastInvokeTime = 0, //上次调用func时间,即成功执行时间 leading = false, //超时之前 maxing = false, //是否传入最大超时时间 trailing = true; //超时之后 if (typeof func != ‘function‘) { throw new TypeError(FUNC_ERROR_TEXT); } wait = toNumber(wait) || 0; if (isObject(options)) { leading = !!options.leading; maxing = ‘maxWait‘ in options; maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait; trailing = ‘trailing‘ in options ? !!options.trailing : trailing; } function invokeFunc(time) {//调用func,参数为当前时间 var args = lastArgs,//调用参数 thisArg = lastThis;//调用的this lastArgs = lastThis = undefined;//清除lastArgs和lastThis lastInvokeTime = time; //上次调用时间为当前时间 result = func.apply(thisArg, args);//调用func,并将结果返回 return result; } function leadingEdge(time) {//超时之前调用 lastInvokeTime = time;//设置上次调用时间为当前时间 timerId = setTimeout(timerExpired, wait); //开始timer return leading ? invokeFunc(time) : result;//如果leading为true,调用func,否则返回result } function remainingWait(time) {//设置还需要等待的时间 var timeSinceLastCall = time - lastCallTime,//距离上次触发的时间 timeSinceLastInvoke = time - lastInvokeTime,//距离上次调用func的时间 result = wait - timeSinceLastCall;//还需要等待的时间 return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result; } function shouldInvoke(time) {//是否应该被调用 var timeSinceLastCall = time - lastCallTime,//距离上次触发时间的时间 timeSinceLastInvoke = time - lastInvokeTime;//距离上次调用func的时间 return (lastCallTime === undefined || (timeSinceLastCall >= wait) || (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait)); } function timerExpired() {//刷新timer var time = now(); if (shouldInvoke(time)) {//如果可以调用,调用trailingEdge return trailingEdge(time); } timerId = setTimeout(timerExpired, remainingWait(time));//不调用则重置timerId } function trailingEdge(time) {//超时之后调用 timerId = undefined; // Only invoke if we have `lastArgs` which means `func` has been // debounced at least once. if (trailing && lastArgs) {//如果设置trailing为true,并且有lastArgs,调用func return invokeFunc(time); } lastArgs = lastThis = undefined;//清除lastArgs和lastThis return result;//否则返回result } function cancel() {//取消执行 if (timerId !== undefined) { clearTimeout(timerId); } lastInvokeTime = 0; lastArgs = lastCallTime = lastThis = timerId = undefined; } function flush() {//直接执行 return timerId === undefined ? result : trailingEdge(now()); } function debounced() { var time = now(), isInvoking = shouldInvoke(time);//判断是否可以调用 lastArgs = arguments;//得到参数 lastThis = this;//得到this对象 lastCallTime = time;//触发时间 if (isInvoking) { if (timerId === undefined) {//首次触发,调用leadingEdge return leadingEdge(lastCallTime); } if (maxing) { // 处理多次频繁的调用 timerId = setTimeout(timerExpired, wait);//设置定时器 return invokeFunc(lastCallTime); } } if (timerId === undefined) {//如果没有timer,设置定时器 timerId = setTimeout(timerExpired, wait); } return result;//返回result } debounced.cancel = cancel; debounced.flush = flush; return debounced; } module.exports = debounce;
_.throttle(func, [wait=0], [options={}])
//throttle.js var debounce = require(‘./debounce‘),//debounce方法 isObject = require(‘./isObject‘);//判断是否为对象 var FUNC_ERROR_TEXT = ‘Expected a function‘; /** * 函数节流 * * @param {Function} func 需要处理的函数. * @param {number} [wait=0] 执行间隔. * @param {Object} [options={}] 选项对象. * @param {boolean} [options.leading=false] 指定是否在超时前调用. * @param {number} [options.maxWait] func延迟调用的最大时间. * @param {boolean} [options.trailing=true] 指定是否在超时后调用. * @returns {Function} 返回节流之后的函数. * @example * * // Avoid excessively updating the position while scrolling. * jQuery(window).on(‘scroll‘, _.throttle(updatePosition, 100)); * * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes. * var throttled = _.throttle(renewToken, 300000, { ‘trailing‘: false }); * jQuery(element).on(‘click‘, throttled); * * // Cancel the trailing throttled invocation. * jQuery(window).on(‘popstate‘, throttled.cancel); */ function throttle(func, wait, options) { var leading = true, trailing = true; if (typeof func != ‘function‘) { throw new TypeError(FUNC_ERROR_TEXT); } if (isObject(options)) { leading = ‘leading‘ in options ? !!options.leading : leading; trailing = ‘trailing‘ in options ? !!options.trailing : trailing; } return debounce(func, wait, { ‘leading‘: leading, ‘maxWait‘: wait, ‘trailing‘: trailing }); } module.exports = throttle;
可以看到这两个方法基本上都差不多,区别在于throttle初始的时候设置了leading为true和maxWait,这样和debounce的区别在于,在第一次触发的时候throttle会直接调用,并且每隔wait的时间都会调用一次,而debounce第一次不会调用,并且只有当触发的间隔时间大于wait时才会调用,否则一直不会调用。
以上是关于lodash源码学习debounce,throttle的主要内容,如果未能解决你的问题,请参考以下文章
Lodash _.debounce 具有用于独特参数变体的单独队列
如何正确使用带有 lodash debounce 的 Vue JS 手表
debounce 忽略所有调用,除了最后一个使用 lodash