函数节流在日常的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 函数节流简单测试的更多相关文章

  1. 也谈js函数节流

    1.什么是js函数节流 其本质就是不让某些代码(函数)在没有间断的情况下连续重复执行,目的就是让执行函数的请求停止了一段时间后才执行. 2.函数节流运用的场景 窗口大小的改变(resize事件),滚动 ...

  2. JS函数节流

    背景:在前端开发中,有时会为页面绑定resize事件,或为一个页面元素拖拽事件(其核心就是绑定mousemove)在一个正常操作中也有可能在一个短时间内触发非常多次事件绑定程序,而DOM操作是很消耗性 ...

  3. js 函数节流和防抖

    js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...

  4. Underscore——JS函数库

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826065.html underscore是什么——它是一个js函数库 jQuery统一了不同浏览器之间的 ...

  5. 深入理解JS函数节流和去抖动

    一.什么是节流和去抖? 1.节流 节流就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不 ...

  6. JS函数节流代码实现

    函数被频繁调用场景 Js中的函数大多数情况下都是由用户主动调用触发的,一般不会遇到性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制.在这些场景下,函数有可能被非常频繁地调用,而造成大的 ...

  7. 结构-行为-样式-Js函数节流

    最近一个面试官问了我一个函数节流的问题,然后感觉自己工作中遇到过这个问题,但是不知道这种形式就是函数节流.下面我来说下这个Js的高级问题,思路:函数节流就是防止用户高频调用某个事件而做的Js层面的处理 ...

  8. js 函数节流throttle 函数去抖debounce

    1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...

  9. JS函数节流和函数防抖问题分析

    问题1:如果实现了dom拖拽功能,但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数,导致浏览器直接卡死,这个时候怎么办? 问题2:如果给一个按钮绑定了表单提交的post事件,但是 ...

随机推荐

  1. BZOJ 3439 Kpm的MC密码

    倒着建trie,然后主席树来求子树第k大. #include<iostream> #include<cstdio> #include<cstring> #inclu ...

  2. 爬虫再探之mysql简单使用

    在爬取数据量比较大时,用EXCEL存取就不太方便了,这里简单介绍一下python操作mysql数据库的一些操作.本人也是借助别人的博客学习的这些,但是找不到原来博客链接了,就把自己的笔记写在这里,这里 ...

  3. Python文本(字面值)

    Python中的文本是一些内置类型的常量表示方法. 字符串和字节 字符串是一系列的字符序列,Python中用单引号(''),双引号(""),或者三个单引号(''' ''')三个双引 ...

  4. Web 仪表盘

    /*********************************************************************** * Web 仪表盘 * 说明: * 之前很久,都想知道 ...

  5. BS模式的模型结构详解

    编号:1004时间:2016年4月12日16:59:17功能:BS模式的模型结构详解 URL:http://blog.csdn.net/icerock2000/article/details/4000 ...

  6. PAT (Basic Level) Practise:1001. 害死人不偿命的(3n+1)猜想

    [题目链接] 卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉一半.这样一直反复砍下去,最后一定在某一步得到n=1.卡拉兹在19 ...

  7. 通过代码设置textview颜色

    Resources resource = (Resources) this.getResources();   ColorStateList csl = (ColorStateList) resour ...

  8. 当我把电脑500G硬盘格式化了的时候,在想些什么

    所以我就想重新尝试一下怎么装多系统,bootloader,MBR到底是怎么回事儿. 简要记录一下: 首先,在可以作为启动盘的U盘里面,备份一份可以用的WinXP镜像+校园网客户端安装文件+驱动精灵安装 ...

  9. Testing Round #8 A. IQ Test 水题

    题目链接:http://codeforces.com/problemset/problem/328/A 这道题目wa了一次,注意这句话: You should also print 42 if the ...

  10. Linux网络管理概述

    概述:计算机基础知识.网络基础知识其实是所有的程序员所必须的,甚至已经不仅仅是程序员的专利,而是每一个人都应该掌握的计算机知识. 主要内容: 一.网络基础 二.Linux网络配置 三.Linux网络命 ...