Javascript Throttle & Debounce应用介绍_基础知识

Throttle
无视一定时间内所有的调用,适合在发生频度比较高的,处理比较重的时候使用。

复制代码 代码如下:

var throttle = function (func, threshold, alt) {
var last = Date.now();
threshold = threshold || 100;
return function () {
var now = Date.now();
if (now - last < threshold) {
if (alt) {
alt.apply(this, arguments);
}
return;
}
last = now;
func.apply(this, arguments);
};
};

Debounce
一定间隔内没有调用时,才开始执行被调用方法。

复制代码 代码如下:

var debounce = function (func, threshold, execASAP) {
var timeout = null;
threshold = threshold || 100;
return function () {
var self = this;
var args = arguments;
var delayed = function () {
if (!execASAP) {
func.apply(self, args);
}
timeout = null;
};
if (timeout) {
clearTimeout(timeout);
} else if (execASAP) {
func.apply(self, args);
}
timeout = setTimeout(delayed, threshold);
};
};

Test

复制代码 代码如下:

var test = function (wrapper, threshold) {
var log = function () {
console.log(Date.now() - start);
};
var wrapperedFunc = wrapper(log, threshold);
var start = Date.now();
var arr = [];
for (var i = 0; i < 10; i++) {
arr.push(wrapperedFunc);
}
while(i > 0) {
var random = Math.random() * 1000;
console.log('index: ' + i);
console.log('random: ' + random);
setTimeout(arr[--i], random);
}
};
test(debounce, 1000);
test(throttle, 1000);

时间: 2025-01-19 17:17:23

Javascript Throttle &amp; Debounce应用介绍_基础知识的相关文章

javascript运算符——位运算符全面介绍_基础知识

前面的话 位运算符是非常底层的运算,由于其很不直观,所以并不常用.但是,其速度极快,且合理使用能达到很好的效果.本文将介绍javascript中常常被忽视的运算符--位运算符 二进制表示 ECMAScript中的所有数值都以IEEE-754 64位格式存储,但位操作符并不直接操作64位的值,而是以32位带符号的整数进行运算的,并且返回值也是一个32位带符号的整数 这种位数转换使得在对特殊的NaN和Infinity值应用位操作时,这两个值都会被当成0来处理 如果对非数值应用位操作符,会先使用Num

Javascript 事件冒泡机制详细介绍_基础知识

1. 事件          在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作.          浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3school教程 进行了解,这将有助于更好地理解以下的内容 . 2.冒泡机制             什么是冒泡呢?          下面这个图片大家应该心领神会吧,气泡从水底开始往上升,由深到浅,升到最上面.在上升的过程中,气泡会经过不同深度层次的水.        

JavaScript Math.ceil() 函数使用介绍_基础知识

Math.ceil(x) -- 返回大于等于数字参数的最小整数(取整函数),对数字进行上舍入 ceil是ceiling的缩写,中文"上限"的意思 引用网址:http://www.dreamdu.com/javascript/Math.ceil/ ceil函数语法 Math.ceil(x); ceil函数参数 x -- 为number类型的数字 ceil函数返回值 返回大于等于x的最小整数 ceil函数示例 document.write(Math.ceil(5.99)); documen

JavaScript的继承的封装介绍_基础知识

复制代码 代码如下: /** * 当调用此函数时,只有第一次参数传入,第二个不存在的情况下,就创建类 * 当调用此函数时,传入了两个参数,第一个参数为基类,第二个参数则在基类的基础上添加内容 */ function extend(obj,prop){ function F(){ } //如果第一个参数为object类型(即json对象)的话,则将json的key value赋值给F函数的原型 F.prototype.key = value if (typeof(obj) == "object&q

在JavaScript中typeof的用途介绍_基础知识

JavaScript 中的 typeof 其实非常复杂,它可以用来做很多事情,但同时也有很多怪异的表现. 本文列举出了它的多个用法,而且还指出了存在的问题以及解决办法. 阅读本文的前提是,你现在应该已经知道原始值和对象值的区别了. 检查一个变量是否存在,是否有值typeof在两种情况下会返回 "undefined": 1.变量没有被声明 2.变量的值是 undefined 例如: 复制代码 代码如下: > typeof undeclaredVariable === "u

javascript学习笔记(十一) 正则表达式介绍_基础知识

1.修饰符 . 任意一个字符 * 匹配*前面0个或多个字符 + 匹配+前面一个或多个字符 ? 匹配?前面0个或1个字符 ^ 以^后面的字符为前导 $ 以$前面的字符结尾 [] 匹配[]内的一个字符 () 分组,可以用\1 \2提取 [^] 匹配^后的以外的字符 {n} {n}前的字符有n个,n为正数 {n,} {n,}前的字符至少有n个,n为正数 {n,m} {n,m}前的字符有n~m个,n,m为正数 2.字符 \d 一个数字 \D 一个非数字 \w 一个字母或数字 \W 一个非字母和非数字 \

Javascript selection的兼容性写法介绍_基础知识

复制代码 代码如下: function getSelectedText() { //this function code is borrowed from: http://www.codetoad.com/javascript_get_selected_text.asp var txt = ""; if (window.getSelection) { txt = window.getSelection(); } else if (window.document.getSelection

Javascript this 函数深入详解_基础知识

 js this 函数详解          本文对Javascript this函数进行详细介绍,及知识的总结整理,彻底明白js this 函数该如何使用. this 代码函数调用时, .1直接调用函数则为this则指向window对象 .2类调用时候指向这个类 .3 方法.apply(obg) :此时这个方法内部的this指向  obj 不传参数 则指向window .4 function 作为构造函数时, 内部this 指向这个新创建出来的对象 总结为 a类直构 this是JavaScri

Javascript数组Array基础介绍_基础知识

Javascript,一门神奇的语言,它的数组也同样独特.我们要去其糟粕,取其精华,把常用的最优实践总结出来.如有错误,请指出. javascript数组是一种类数组的对象,拥有对象的特性.当属性名是小而连续的整数时,应该使用数组,否则,使用对象. 数组来源 所有的数组都是Array构造出来的,我们来测试一下constructor这个属性. var arr = []; arr.constructor === Array; // true arr.constructor === Array.pro