解析underscore中的debounce
先奉上源码
取自Underscore.js 1.9.1的debounce
_.debounce = function(func, wait, immediate) {
var timeout, result;
var later = function(context, args) {
timeout = null;
if (args) result = func.apply(context, args);
};
var debounced = restArguments(function(args) {
if (timeout) clearTimeout(timeout);
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(later, wait);
if (callNow) result = func.apply(this, args);
} else {
timeout = _.delay(later, wait, this, args);
}
return result;
});
debounced.cancel = function() {
clearTimeout(timeout);
timeout = null;
};
return debounced;
};
其中比较陌生的是restArguments
和_.delay
,那么我们首先来逐个分析它们
restArguments
// Some functions take a variable number of arguments, or a few expected
// arguments at the beginning and then a variable number of values to operate
// on. This helper accumulates all remaining arguments past the function’s
// argument length (or an explicit `startIndex`), into an array that becomes
// the last argument. Similar to ES6’s "rest parameter".
var restArguments = function(func, startIndex) {
startIndex = startIndex == null ? func.length - 1 : +startIndex;
return function() {
var length = Math.max(arguments.length - startIndex, 0),
rest = Array(length),
index = 0;
for (; index < length; index++) {
rest[index] = arguments[index + startIndex];
}
// 个人觉得这段switch没有特别意义,可以删除
// switch (startIndex) {
// case 0: return func.call(this, rest);
// case 1: return func.call(this, arguments[0], rest);
// case 2: return func.call(this, arguments[0], arguments[1], rest);
// }
var args = Array(startIndex + 1);
for (index = 0; index < startIndex; index++) {
args[index] = arguments[index];
}
args[startIndex] = rest;
return func.apply(this, args);
};
};
它很类似ES6
的剩余参数
举个例子
function sum (a, b, rest) {
var sum = a + b;
console.log(Array.isArray(rest)); // 打印true
if (rest.length) {
sum += rest.reduce((x, y) => x + y);
}
return sum;
}
ra_sum = restArguments(sum);
console.log(ra_sum(1, 2)); // 8
console.log(ra_sum(1, 2, 3, 4, 5)); // 15
// 利用ES6的剩余参数可以这样写
function es6_ra_sum(a, b, ...rest) {
var sum = a + b;
console.log(rest)
console.log(Array.isArray(rest)); // 打印true
if (rest.length) {
sum += rest.reduce((x, y) => x + y);
}
return sum;
}
console.log(es6_ra_sum(1, 2)); // 3
console.log(es6_ra_sum(1, 2, 3, 4, 5)); // 15
_.delay
// Delays a function for the given number of milliseconds, and then calls
// it with the arguments supplied.
_.delay = restArguments(function(func, wait, args) {
return setTimeout(function() {
return func.apply(null, args);
}, wait);
});
// 相当于
_.delay = function(func, wait, ...args) {
return setTimeout(function() {
return func.apply(null, args);
}, wait);
}
_.debounce
_.debounce = function(func, wait, immediate) {
var timeout, result;
var later = function(context, args) {
timeout = null; // 重置timeout为了leading执行
// 判断arg是为了下面运行timeout = setTimeout(later, wait);这句话时func不会被执行
if (args) result = func.apply(context, args);
};
// 原本来是restArgumenst返回函数,这里为了直观我直接换成es6的剩余参数形式
var debounced = function(...args) {
if (timeout) clearTimeout(timeout);
if (immediate) {
//初始的时候timeout为undefined,later函数运行的时候置为null, 这两种情况callNow为true
var callNow = !timeout;
// 下面这句话的目的不是为了执行func而是切换timeout的值,也就是间接改变callNow。而且later中args并没有传入所以不会执行later中不会执行func
timeout = setTimeout(later, wait);
// 这句话才是当immediate为true时真正地执行func
if (callNow) result = func.apply(this, args);
} else {
// trailing执行func
timeout = _.delay(later, wait, this, args);
// 相当于setTimeout(function() {
// return later.apply(null, [this, args]);
// }, wait);
// 再在later中运行result = func.apply(this, args); 最后和callNow的时候运行一致
}
return result;
}
debounced.cancel = function() {
clearTimeout(timeout);
timeout = null;
};
return debounced;
};
解析underscore中的debounce的更多相关文章
- 解析underscore中的throttle
什么是throttle(节流) Throttling enforces a maximum number of times a function can be called over time. 简单 ...
- 理解Underscore中的_.bind函数
最近一直忙于实习以及毕业设计的事情,所以上周阅读源码之后本周就一直没有进展.今天在写完开题报告之后又抽空看了一眼Underscore源码,发现上次没有看明白的一个函数忽然就豁然开朗了,于是赶紧写下了这 ...
- 理解Underscore中的节流函数
上一篇中讲解了Underscore中的去抖函数(_.debounced),这一篇就来介绍节流函数(_.throttled). 经过上一篇文章,我相信很多人都已经了解了去抖和节流的概念.去抖,在一段连续 ...
- 关于 underscore 中模板引擎的应用演示样例
//关于 underscore 中模板引擎的应用演示样例 <!doctype html> <html> <head> <meta charset=" ...
- 深入解析Underscore.js源码架构
Underscore.js是很有名的一个工具库,我也经常用他来处理对象,数组等,本文会深入解析Underscore源码架构,跟大家一起学习下他源码的亮点,然后模仿他写一个简单的架子来加深理解.他的源码 ...
- 浅解析js中的对象
浅解析js中的对象 原文网址:http://www.cnblogs.com/foodoir/p/5971686.html,转载请注明出处. 前面的话: 说到对象,我首先想到的是每到过年过节见长辈的时候 ...
- 深入解析Javascript中this关键字的使用
深入解析Javascript中面向对象编程中的this关键字 在Javascript中this关键字代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如: function TestFun ...
- js中eval详解,用Js的eval解析JSON中的注意点
先来说eval的用法,内容比较简单,熟悉的可以跳过eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要 ...
- 2dx解析cocosbuilder中使用layer时的缺陷
2dx解析cocosbuilder中使用layer时的缺陷 cocos2d-x 3.7 cocosbuilder中的layer通常会用到触摸属性: 但是在2dx解析布局文件的时候,却很多属性都没解析: ...
随机推荐
- python批量提取哔哩哔哩bilibili视频
# -*- coding: utf-8 -*- """ Created on Tue Jan 29 13:26:41 2019 @author: kwy "&q ...
- k种球若干,取n个球,输出所有取球方案 (模拟)
有K种颜色的小球(K<=10),每种小球有若干个,总数小于100个. 现在有一个小盒子,能放N个小球(N<=8),现在要从这些小球里挑出N个小球,放满盒子. 想知道有哪些挑选方式.注:每种 ...
- 【剑指Offer面试编程题】题目1360:乐透之猜数游戏--九度OJ
题目描述: 六一儿童节到了,YZ买了很多丰厚的礼品,准备奖励给JOBDU里辛劳的员工.为了增添一点趣味性,他还准备了一些不同类型的骰子,打算以掷骰子猜数字的方式发放奖品.例如,有的骰子有6个点数(点数 ...
- 「Luogu P5494 【模板】线段树分裂」
(因为没有认证,所以这道题就由Froggy上传) 线段树分裂用到的地方确实并不多,luogu上以前也没有这道模板题,所以就出了一道,实在是想不出怎么出模板了,所以这道题可能可以用一些其他的算法水过去. ...
- 采用Keepalived+Nginx解决方案实现高可用的API网关(下)
1 Keepalived 3.1Keepalived介绍 Keepalived 是一种高性能的服务器高可用或热备解决方案,Keepalived 可以用来防止服务器单点故障的发生,通过配合 Nginx ...
- Day11 - O - Coin Game HDU - 3951
题目链接 思路:考虑第一个人取的方式: 1.每次能取的次数>= n, 一次取完 first win 2.每次能取1个,n是奇数 first win 3.一次取不完,这种情况下也分2种情况 1)s ...
- 8.Memcache
1.概述 (1) Memcached是什么 Memcached是一款开源的.高性能的.分布式的内存对象缓存系统 (2) Memcached能干什么 最主要的功能就是:在内存中缓存数据,以减轻数据库负载 ...
- sklearn.neighbors.KNeighborsClassifier(k近邻分类器)
KNeighborsClassifier参数说明KNeighborsClassifier(n_neighbors=5, weights='uniform', algorithm='auto', lea ...
- Xshell 5的快捷键
Xshell 5的快捷键 1. 点击下图中的按钮查看快捷键: 2. 快捷键备忘录: 序号 功能 快捷键 备注 1 在窗口和撰写栏之间切换 Alt+I 2 全屏 Alt+Enter 3 ...
- 重要参考SQL
--保存问卷调查信息IF ISNULL(OBJECT_ID('P_WebSaveSQRecord'),0) > 0 DROP PROCEDURE P_WebSaveSQRecordGO crea ...