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事件,但是 ...
随机推荐
- 数据结构《9》----Threaded Binary Tree 线索二叉树
对于任意一棵节点数为 n 的二叉树,NULL 指针的数目为 n+1 , 线索树就是利用这些 "浪费" 了的指针的数据结构. Definition: "A binary ...
- "无意义"的div和span标签
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器.<div>元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行.如果与 C ...
- JSTL&EL(程序员必看之一)
EL表达式 可以在jsp页面中减少大量的Java代码.Expression Language,它是一种借鉴了javaScript和XPath的表达式语言. EL表达式定义了一系列的隐含对象和操作符,使 ...
- [转]SQLite C/C++
SQLite C/C++ http://blog.csdn.net/diaoser/article/details/6830786 辅助工具工具 Sqlite数据库的管理工具有SQLiteMana ...
- java学习第九天
目标 异常(5个关键字 throw try catch finally throws ) 一.概念 异常: 非正常情况,例外.人为什么会生病?内因+外因.内因: 身体不够健壮—>锻炼身体增强体质 ...
- beta 阶段的 postmortem 报告
part一: 用户数:目前约30人 总结:与当初的预算差不多,首先1.第一次开发软件,经验效率不足,那是很正常的事情.2.用户数量少,因为宣传力度还是比较的少.应该加强软件的推广才行. part二: ...
- LeetCode Combination Sum II (DFS)
题意: 在集合candidates中选出任意多个元素,使得他们的和为target,返回所有的组合,以升序排列. 思路: 难点在于如何去重,比如集合{1,1,2},target=3,那么只有一个组合就是 ...
- 解决chrome同步问题
原方法为 修改文件:“C:\WINDOWS\system32\drivers\etc\hosts”,但是经常失败,需要重新修改,很是麻烦. 更好的方法是使用 “谷歌访问助手(chrome版)” 具体参 ...
- android webview如何加载asset目录里的页面
在asset里的页面都可以这样获得 file:///android_asset/index.html
- ssh 无密码登录
ssh 无密码登录要使用公钥与私钥.linux下可以用用ssh-keygen生成公钥/私钥对,下面我以CentOS为例. 有机器A(192.168.1.155),B(192.168.1.181).现想 ...