Underscore.js 函数节流简单测试
函数节流在日常的DOM界面数据交互中有比较大的作用,可以减少服务器的请求,同时减少客户端的内存影响
Underscore.js 本省就包含了函数节流的处理函数
_.throttle 和 _.debounce
简单的测试使用如下:
需要使用的类库为jquery 、Underscore
测试的方法为:mousemove 事件
测试页面代码如下:
<!DOCTYPE html >
<html>
<head>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="underscore-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#infoapp').on('mousemove', alertinfo); 不使用节流方法 // $('#infoapp').on('mousemove', _.throttle(alertinfo, 5000)); 使用节流方法 throttle // $('#infoapp').on('mousemove', _.debounce(alertinfo, 1000, false)); 使用节流方法debounce
}
)
// 进行回调的事件处理函数
function alertinfo() { var data = new Date();
console.log(data);
}
</script>
</head>
<body>
<div id="infoapp" style="background-color: Red; width: 200px; height: 200px; margin:0 auto;">
</div>
</body>
</html>
测试的结果如下:
结论:
总的来说对于我们在密集数据请求的ajax 交互中使用函数节流的方式有很大的帮助,减少了很多的没有必要的数据请求。
Underscore.js 函数节流简单测试的更多相关文章
- 也谈js函数节流
1.什么是js函数节流 其本质就是不让某些代码(函数)在没有间断的情况下连续重复执行,目的就是让执行函数的请求停止了一段时间后才执行. 2.函数节流运用的场景 窗口大小的改变(resize事件),滚动 ...
- JS函数节流
背景:在前端开发中,有时会为页面绑定resize事件,或为一个页面元素拖拽事件(其核心就是绑定mousemove)在一个正常操作中也有可能在一个短时间内触发非常多次事件绑定程序,而DOM操作是很消耗性 ...
- js 函数节流和防抖
js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...
- Underscore——JS函数库
转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826065.html underscore是什么——它是一个js函数库 jQuery统一了不同浏览器之间的 ...
- 深入理解JS函数节流和去抖动
一.什么是节流和去抖? 1.节流 节流就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不 ...
- JS函数节流代码实现
函数被频繁调用场景 Js中的函数大多数情况下都是由用户主动调用触发的,一般不会遇到性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制.在这些场景下,函数有可能被非常频繁地调用,而造成大的 ...
- 结构-行为-样式-Js函数节流
最近一个面试官问了我一个函数节流的问题,然后感觉自己工作中遇到过这个问题,但是不知道这种形式就是函数节流.下面我来说下这个Js的高级问题,思路:函数节流就是防止用户高频调用某个事件而做的Js层面的处理 ...
- js 函数节流throttle 函数去抖debounce
1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...
- JS函数节流和函数防抖问题分析
问题1:如果实现了dom拖拽功能,但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数,导致浏览器直接卡死,这个时候怎么办? 问题2:如果给一个按钮绑定了表单提交的post事件,但是 ...
随机推荐
- yii2 ArrayHelper map 使用
<不喜勿喷> 引用类 use yii\helpers\ArrayHelper; 源码中修改(尽量不要修改,可以研究下不修改的方式) 源码路径 查看数据 视图层 实现效果
- c# 只允许一个实例运行
1.单件模式,Singleton,应用程序只能允许一个实例在运行.这是最好的解决方法2.查询系统进程里是不是已经运行.private void Form1_Load(object sender, Ev ...
- Google protobuf
个人理解: 定义.proto文件就是指明消息里包含的成员和类型,protoc会compile成相应的java文件包含interface和implementation class,然后在构建messag ...
- HDU 5828(线段树)
Problem Rikka with Sequence 题目大意 维护一个序列,支持三种操作. 操作1:区间加. 操作二:区间开根号(向下取整). 操作3:区间求和. 解题分析 可以发现经过若干次操作 ...
- MINIX3 进程调度分析
MINIX3 进程调度分析 5.1MINIX3 进程调度概要 MINIX3 的进程调度还是非常简单的,调度算法是非常短小的,其目的就是体现 了一个简单和高效的设计原则,当然简单和高效其实很难并存, ...
- curl 发送带有Authorization的post请求命令
curl --user user:password -d "param1=111¶m2=222" "http://127.0.0.1/cmd"
- Linux服务器使用命令操作MySQL插入数据乱码问题
服务器上使用MySQL命令方式进行插入数据时,很多时候会遇到插入数据乱码问题,导出一个sql执行文件,再倒入到unbutn中,结果出现乱码,折腾7-8分钟, 解决方式 在导出mysql sql执行文件 ...
- javascript 中 typeof 的使用
javascript 中 typeof 的使用 javascript有五种基本的数据类型(简单数据类型),它们分别是:String.Undefined.Null.Boolean和Number.还有一种 ...
- 我也谈谈 代码调用存储过程超时,SQL Server Management Studio里运行很快的问题
最近遇到了一个问题就是 一个执行速度很快的存储过程,在代码中调用的时候却超时了. 后来看到了两篇文章: 其中一篇是这样介绍的 今天同事用代码调用存储过程时超时,在SQL Server Manageme ...
- MACOS,LINUX,IOS上可用的毫秒级精度时间获取
二话不说,先上代码 void outputCurrentTime(uint32_t seq,const char* type){ struct timeval t_curr; gettimeofday ...