函数节流在日常的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. PHP中常用正则表达式大全

    常用正则表达式大全!(例如:匹配中文.匹配html) 匹配中文字符的正则表达式: [u4e00-u9fa5]    评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内 ...

  2. OC多线程管理

    在OC中多线程管理包含GCD.NSThread.NSOperationQueue. 下面简单介绍. 进程和线程 进程:正在进行中的程序叫做进程,负责程序运行的内存分配. 每一个进程都有自己独立的虚拟内 ...

  3. 1、网页制作Dreamweaver（界面、基本操作、锚点、表格）

    界面 网页的界面html由两部分组成:<head>和<body>,<title>放在<head>中 1.以下是<head>部分的解释: &l ...

  4. 批处理启动QQ

    1.该方法只能启动一个qq.如果设置qq自启动时添加多个qq,则无法实现自动登陆 reg del "D:\TencentME\All Users\QQ\Registry.db"re ...

  5. 【转】Fiddler 教程

    原文转自:http://www.cnblogs.com/tankxiao/archive/2012/02/06/2337728.html Fiddler是最强大最好用的Web调试工具之一,它能记录所有 ...

  6. [转]Golang－ import 导入包的语法

    http://blog.csdn.net/zhangzhebjut/article/details/25564457 一 包的导入语法      在写Go代码的时候经常用到import这个命令用来导入 ...

  7. Objective-C对象初始化 、 实例方法和参数 、 类方法 、 工厂方法 、 单例模式

    1 重构Point2类 1.1 问题 本案例使用初始化方法重构Point2类,类中有横坐标x.纵坐标y两个属性,并且有一个能显示位置show方法.在主程序中创建两个Point2类的对象,设置其横纵坐标 ...

  8. C语言--- 字符串数组 、 预处理器和预处理指令 、 多文件编程 、 结构体

    1 输入一个姓名,判断是否是五虎上将. 1.1 问题 本案例需要使用交互的方式判断:用户从控制台输入一个名字,由程序判断该名字是否在五虎上将的名单中.五虎上将的名单是:GuanYu.ZhangFei. ...

  9. 内存回收,Dispose,Close,Finalie(C#中的析构函数)

    NET中的资源分托管和非托管,所谓的托管是指CLR(通用语言运行时)中进行管理的资源,它可以由CLR自动进行内存回收. 也就是大家熟知的GC(垃圾回收机制). 而对于 非托管资源,比如数据库连接,CO ...

  10. JavaScript数据结构——集合、字典和散列表

    集合.字典和散列表都可以存储不重复的值. 在集合中,我们感兴趣的是每个值本身,并把它当作主要元素.在字典和散列表中,我们用 [键,值] 的形式来存储数据. 集合(Set 类):[值,值]对,是一组由无 ...