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事件,但是 ...
随机推荐
- Android启动组件的三种主流及若干非主流方式
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处 启动组件的一些方式,今天做一个简要的总结 Service:通过startService()启动,或者写 ...
- vs常用调试快捷键
vs2005常用调试快捷键 ,开发起来更加的方面,虽然现在vs2008发布了,但vs2005还是一个主流,个人还是用vs2005,调试代码也多. F6: 生成解决方案Ctrl+F6: 生成当前项目F7 ...
- 为什么要urlencode
为什么要urlencode 1.为了正常获取值 字符 特殊字符的含义 URL编码 & 分隔不同的变量值对 %26 = 用来连接键和值 %3D ? 表示查询字符串的开始 %3F # 用来标志 ...
- html 和 body详解
1.背景色 当不设置html的时候,html的属性不生效,浏览器会捕获body的颜色作为浏览器背景颜色,如果html生效了,则会捕获html的颜色作为浏览器背景颜色. [例1:不设置 html] bo ...
- css中常用的hack
<!DOCTYPE html> <html> <head> <title>Css Hack</title> <style> #t ...
- Ubuntu14.04安装配置Open vSwitch
最近在研究学习Open vSwitch,准备在本地Ubuntu14.04机器上安装一下,并基于其创建一些KVM虚拟机,下面就简要记录下在Ubuntu14.04系统上安装Open vSwitch的过程. ...
- SqlServer 杂记 不断补充中
1.OPTION (MAXRECURSION 25) :最大允许递归的次数.默认最大CTE递归只有100次,而你要求插入10年的数据,需要递归3000多次,所以要使用option (MAXRECURS ...
- WordPress自定义文章页面模板
如果想让某个分类的文章页面样式有别于其它分类,我们可以使用自定义的模板的方法实现.例如,我们准备让名称为 WordPress 的分类文章使用有别于其它分类的模板样式, 首先在所用主题根目录新建一个名称 ...
- poj 1260 dp
Description In Pearlania everybody is fond of pearls. One company, called The Royal Pearl, produces ...
- 菜鳥日記:為 Github 添加 ssh
這只是一篇求真務實言簡意賅的菜鳥日記 記錄了碼盲在OSX 中為Github添加 ssh 的過程 要從 Github 上克隆個源碼到本地,發現無 ssh 密鈅 於是開到官網幫助照貓畫虎如下: 1.打開 ...