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);

时间: 2013-03-16

Javascript 按位与运算符 (&amp;)使用介绍

复制代码 代码如下: result = [整数1] & [整数1] & 对两个 32 位表达式的每一个位执行按位"与"运算. 如果两个位均为 1,则结果是 1. 否则,结果为 0. 位1 位2 位与 0 0 0 1 1 1 0 1 0 1 0 0下面的示例演示如何使用 & 位与运算符和 &= 按位与赋值运算符: 复制代码 代码如下: // 9 二进制是 1001,补足32位为 00000000000000000000000000001001 var ex

JAVA中的基本数据类型

byte: java中最小的数据类型.1字节/8位.-128(2^7)~127(2^7-1),默认值0. short: 短整型,2字节/16位,取值范围-32768(--2^15)~32767(2^15-1),默认值0 int: 整型,4字节/32位,取值范围-2147483648(-2^31)~2147483647(2^31-1),默认值0 long: 长整型,8字节/64位,-2^63(-2^63)~2^63-1(2^63-1),默认值0L float: 浮点型,4字节/32位,用于存储带小

JavaScript 获取/设置光标位置,兼容Input&amp;&amp;TextArea

JavaScript 获取/设置光标位置,兼容Input&&TextArea. body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } .input { width: 50%; font-family: Verdana, sans-serif; font-size: 13px

js调用图片隐藏&amp;显示实现代码

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <SCRIPT> var intTimeStep=20; var isIe=(window.ActiveXObject)?true:false; var intAlphaStep=(isIe)?5:0.05; var curSObj=null; var curOpa

js中传递特殊字符(+,&amp;)的方法

背景: 今天在做一个任务时,用Jquery的Ajax传递一长串字符时,在后台的验证一直不成功,纠结时我了(那个字符串是随机生成的,特长).查了一上午,原来是我生成的字符串中有+号,而在js传递的时候,会理解为是连接字符用的,到了后台就将+号自动变为空格了,所以后台的字符串和前台生成的已经不一样了. 原因: js后自动解析特殊字符,如+号为连接符,解析为空格,&为变量连接符,服务器端接受数据时&以后的数据不显示等等. 解决办法: 1.将字符放到form中,然后用js提交form表单到服务器.

JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)

问题 在Ajax应用中,调用XMLHttpRequest是很常见的情况.特别是以客户端为中心的Ajax应用,各种需要从服务器端获取数据的操作都通过XHR异步调用完成.然而在单线程的JavaScript编程中,XHR异步调用的代码风格实在是与一般的JavaScript代码格格不入. 额外参数 考虑一个除法函数,如果它是纯客户端的同步函数,那么签名会是这样的: function divide(operand1, operand2) 然而假设我们对客户端除法的精度不满意,于是把除法转移到服务器端来执行

浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总

先来看一个简单的例子:下面以三个页面分别命名为frame.html.top.html.bottom.html为例来具体说明如何做.frame.html 由上(top.html)下(bottom.html)两个页面组成,代码如下: 复制代码 代码如下: <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >< HTML >< HEAD >< TITLE > frame

js 与或运算符 || &amp;&amp; 妙用

首先出个题:如图: 假设对成长速度显示规定如下: 成长速度为5显示1个箭头: 成长速度为10显示2个箭头: 成长速度为12显示3个箭头: 成长速度为15显示4个箭头: 其他都显示都显示0各箭头. 用代码怎么实现? 差一点的if,else: Js代码 复制代码 代码如下: var add_level = 0; if(add_step == 5){ add_level = 1; } else if(add_step == 10){ add_level = 2; } else if(add_step

JavaScript 布尔操作符解析 &amp;&amp; || !

1.逻辑非 逻辑非用!表示,可以应用与ECMAScript的任何类型的值,逻辑非操作返回的是一个布尔值(true/false).该操作符首先会将它的操作数转换为一个布尔值,然后再对其求反. 下面说明下Boolean()转型函数的一组规则. 数据类型 转换为true的值 转换为false的值 Boolean true false String 任何非空字符串 ""(空字符串) Number 任何非零数字值(包括无穷大) 0和NaN Object 任何对象 null Undefined  

基于jquery &amp; json的省市区联动代码

效果演示: html代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>省市区联动</title> <script src="/Scripts/jquery.min.js" type="text/javascript"></script> <sc

Javascript 中的 &amp;&amp; 和 || 使用小结

普通情况下的 && 和 || 比较简单,这里不进行讨论. 准备两个对象用于下面的讨论. 复制代码 代码如下: var alice = { name: "alice", toString: function () { return this.name; } } var smith = { name: "smith", toString: function () { return this.name; } } 在 javascript 中,对于 &

关于javascript中dataset的问题小结

DataSet是ADO.NET的中心概念.可以把DataSet当成内存中的数据库,DataSet是不依赖于数据库的独立数据集合.所谓独立,就是说,即使断开数据链路,或者关闭数据库,DataSet依然是可用的,DataSet在内部是用XML来描述数据的,由于XML是一种与平台无关.与语言无关的数据描述语言,而且可以描述复杂关系的数据,比如父子关系的数据,所以DataSet实际上可以容纳具有复杂关系的数据,而且不再依赖于数据库链路. 一.关于dataset 1.html5自定义属性及基础 html5

JavaScript中常用的运算符小结

一.一元运算符 1.delete 运算符:删除对以前定义的对象属性或方法的引用.例如: var o=new Object; o.name="superman"; alert(o.name); //输出 "superman" delete o.name; alert(o.name); //输出 "undefined" 删除了name属性,将其设置为undefined(即创建的未初始化的变量的值).delete不能删除开发者未定义(即ECMAScri

JavaScript中的时间处理小结

废话不多说了,主要通过以下七个方面给大家总结了时间处理相关知识. 1.获取当前时间 function getNowTime() { return new Date(); } 2.时间与天数相加 function getTimeAddDays(time, days) { return new Date(time.getTime() + days * 24 * 60 * 60 * 1000); } 3.获取并格式化日期:年-月-日 function getFormatDate(time) { ret

JavaScript中的数据类型转换方法小结

JavaScript 变量可以转换为新变量或其他数据类型: 通过使用 JavaScript 函数 通过 JavaScript 自身自动转换 将数字转换为字符串 全局方法 String() 可以将数字转换为字符串. 该方法可用于任何类型的数字,字母,变量,表达式: 实例 String(x) // 将变量 x 转换为字符串并返回 String(123) // 将数字 123 转换为字符串并返回 String(100 + 23) // 将数字表达式转换为字符串并返回 Number 方法 toStrin

javascript中的括号()用法小结

1.提高优先级 (1+2)*3 与数学运算中保持一致,先计算1+2再乘以3得出9 同时也可以是其他表达式,如: 复制代码 代码如下: (a+(function(i){return i}(2)))*c 2.函数的参数要放在括号里() 复制代码 代码如下: function fun(a,b,c){    //-} 3.立即执行函数表达式 复制代码 代码如下: (function fun(a,b,c){    //-})(1,2,3) 这里的括号(1,2,3)中的参数对应的是前面函数的参数,当第一个括

javascript中Number的方法小结

一.构造函数 Number(value) new Number(value) 二.Number属性 1.Number.MAX_VALUE 返回能表示的最大数字. 2.Number.MIN_VALUE 能表示的最小数字. 3.Number.NAN 非数字值. 4.Number.NEGATIVE_INFINITY 负无穷,当溢出时返回. 5.Number.POSITIVE_INFINITY 正无穷,当溢出时返回. 三.Number方法 1.toString() 使用指定进制,将一个数字转换为字符串.

JavaScript中错误正确处理方式小结你用对了吗

JavaScript的事件驱动范式增添了丰富的语言,也是让使用JavaScript编程变得更加多样化.如果将浏览器设想为JavaScript的事件驱动工具,那么当错误发生时,某个事件就会被抛出.理论上可以认为这些发生的错误只是JavaScript中的简单事件. 本文将会讨论客户端JavaScript中的错误处理.主要介绍JavaScript中的易犯错误.错误处理.异步代码编写等内容. 下面就让我们一起看看如何正确处理JavaScript中的错误. Demo演示 本文中使用的demo可以在GitH

javascript中对Date类型的常用操作小结

javascript中对Date类型的常用操作小结 /** 3. * 日期时间脚本库方法列表: 4. * (1)Date.isValiDate:日期合法性验证 5. * (2)Date.isValiTime:时间合法性验证 6. * (3)Date.isValiDateTime:日期和时间合法性验证 7. * (4)Date.prototype.isLeapYear:判断是否闰年 8. * (5)Date.prototype.format:日期格式化 9. * (6)Date.stringToD

javascript中对象的定义、使用以及对象和原型链操作小结

本文实例总结了javascript中对象的定义.使用以及对象和原型链操作.分享给大家供大家参考,具体如下: 1. 除了5种基本类型外,JS中剩下的就是对象 (1)对象的定义: 直接定义: var test={x:1,y:1} new方式创建: var test=new Object({x:1}) Object.create方式: var test=Object.create({x:1}) (2)对象上的赋值与取值 举例: var test={ x:1, y:2 } 方法一:可以通过test['x