// fn是我们需要包装的事件回调, delay是时间间隔的阈值
export function throttle(fn, delay) {
// last为上一次触发回调的时间, timer是定时器
let last = ,
timer = null;
// 将throttle处理结果当作函数返回 return function() {
// 保留调用时的this上下文
let context = this;
// 保留调用时传入的参数
let args = arguments;
// 记录本次触发回调的时间
let now = +new Date(); // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
if (now - last < delay) {
// 如果时间间隔小于我们设定的时间间隔阈值,则为本次触发操作设立一个新的定时器
clearTimeout(timer);
timer = setTimeout(function() {
last = now;
fn.apply(context, args);
}, delay);
} else {
// 如果时间间隔超出了我们设定的时间间隔阈值,那就不等了,无论如何要反馈给用户一次响应
last = now;
fn.apply(context, args);
}
};
}

throttle工具函数的更多相关文章

  1. javascript 实用工具函数

    整理日常开发中我们常常会使用到的一些工具函数. var utils = (function(){ var fay = {}; // 返回当前时间的毫秒数 fay.getTime = Date.now( ...

  2. 常用的工具函数助力JavaScript高效开发

    前言 日常开发中,面对各种不同的需求,我们经常会用到以前开发过的一些工具函数,把这些工具函数收集起来,将大大提高我们的开发效率. 1.校验数据类型 export const typeOf = func ...

  3. JQuery中的工具函数总结

    前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ ...

  4. 五、jquery使用工具函数

    工具函数对应的网址在 http://api.jquery.com/categouy/utilities/   工具函数处理对象的不同,可以将其分为几大类别:浏览器的检测.数组和对象的操作.字符串的操作 ...

  5. jQuery工具函数(转)

    原文地址:http://www.cnblogs.com/kissdodog/archive/2012/12/27/2835561.html 作者:逆心 ------------------------ ...

  6. jQuery实用工具函数

    1. 什么是工具函数 在jQuery中,工具函数是指直接依附于jQuery对象.针对jquery对象本身定义的说法,即全局性的函数,我们统称为工具函数,或Utilities函数.它们有一个明显的特征, ...

  7. javascript工具函数

    第一部分 JavaScript工具函数 转义特殊字符为html实体   HtmlEncode: function(str){ return str.replace(/&/g, '&') ...

  8. 读<jQuery 权威指南>[6]--实用工具函数

    官方地址:http://api.jquery.com/category/utilities/ 一.数组和对象操作 1. $.each——遍历 $.each(obj,function(param1,pa ...

  9. AJAX编程-封装ajax工具函数

    即 Asynchronous [e'sɪŋkrənəs] Javascript And XML,AJAX 不是一门的新的语言,而是对现有技术的综合利用.本质是在HTTP协议的基础上以异步的方式与服务器 ...

随机推荐

  1. leetcode第36题:有效的数独

    解题思路:按行,列,3*3方格读取元素,存入字典中.若字典中该元素的值大于1,则返回false,否则返回true. class Solution: def isValidSudoku(self, bo ...

  2. svn使用2(转)

    首先打开VisualSVN Server Manager,如图: 可以在窗口的右边看到版本库的一些信息,比如状态,日志,用户认证,版本库等.要建立版本库,需要右键单击左边窗口的Repositores, ...

  3. PCIe的事务传输层的处理(TLP)

    主要从以下几个方面解决: 1.TLP基本的概念: 2.寻址定位与路由导向 3.请求和响应机制 4.虚拟通道机制 5.数据完整性 6.i/o,memory,configuration,message r ...

  4. vm文件的优点

    vm文件的优点 相较于内容写在jsp 文件: 1.在网页上上浏览和下载的内容用的是同一套,也就是说只需要维护一套内容,页面上看到的和下载得到的是一致的. 2.版本控制较为简便, 实现了页面内容和jsp ...

  5. 关于log4j中log4j.properties和log4j.xml的加载顺序

    如果采用log4j输出日志,要对log4j加载配置文件的过程有所了解. log4j启动时,默认会寻找source folder下的log4j.xml配置文件,若没有,会寻找log4j.properti ...

  6. 吴裕雄--天生自然KITTEN编程:切换角色

  7. Maximum Value(CodeForces - 484B)

    Maximum Value Time limit 1000 ms Memory limit 262144 kB You are given a sequence a consisting of n i ...

  8. Gif截屏工具 - GifCam

    如果你需要录制截屏并保存成gif图片格式,那么你一定不能错过GifCam这个神奇的小工具.它虽然只有600K,但功能不可小觑. GifCam (Gif相机) 是一款免费且非常优秀的视频录制/剪辑的GI ...

  9. 从Instagram“宁静、规则”的成功 看国内APP发展之路

    看国内APP发展之路" title="从Instagram"宁静.规则"的成功 看国内APP发展之路"> Instagram在全球获得的巨大成功 ...

  10. JavaScript中点击按钮弹出新的浏览器窗口

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.js * 作者:常轩 * 微信公众号:Worldhel ...