// 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. Rancher的部署安装(编排选用K8S)

    为什么要使用Rancher Rancher是一个开源的企业级容器管理平台.通过Rancher,企业再也不必自己使用一系列的开源软件去从头搭建容器服务平台.Rancher提供了在生产环境中使用的管理Do ...

  2. dubbo分布式框架下web层调用业务层一直报空指针异常的解决办法

    java.lang.NullPointerException............... 环境:SSM(通用mapper)+Dubbo 1.检查导包 提示注解@Reference  应该导入  im ...

  3. Rancher安装多节点高可用(HA)

    Rancher版本:Rancher v1.0.1 基本配置需求 多节点的HA配置请参照单节点需求 节点需要开放的端口 全局访问:TCP 端口22,80,443,18080(可选:用于在集群启动前 查看 ...

  4. 使用JavaServer Faces技术的Web模块:hello1 example

    该hello1应用程序是一个Web模块,它使用JavaServer Faces技术来显示问候语和响应.您可以使用文本编辑器查看应用程序文件,也可以使用NetBeans IDE. 此应用程序的源代码位于 ...

  5. JAVA中String类的比较

    首先给大家看一段代码 package javaapptest; public class JavaAppTest { public static void main(String[] args) { ...

  6. 使用js闭包的好处

    使用闭包有以下几大好处: a:希望一个变量长期驻扎在内存中. b:避免全局变量的污染.

  7. 变身六次失去核心的小米Note还能火吗

    奥特曼变身有时间限制,因此我们总是希望它多变几次身,从而把小怪兽打得嗷嗷叫.但对于科技产品来说,不断推出"变身版",似乎总有江河日下.大势已去之感.三星形形色色的复仇者联盟S6版, ...

  8. 当async: true 时,ajax请求是异步的

    方法beforeSend,用于在向服务器发送请求前添加一些处理函数.   type:"GET",//通常会用到两种:GET,POST.默认是:GET      url:" ...

  9. 【转】PHP中被忽略的性能优化利器:生成器.md

      PHP  如果是做Python或者其他语言的小伙伴,对于生成器应该不陌生.但很多PHP开发者或许都不知道生成器这个功能,可能是因为生成器是PHP 5.5.0才引入的功能,也可以是生成器作用不是很明 ...

  10. Hive Functions

    函数的分类 内置函数 操作符 复杂对象 UDF函数 数学函数 类型转换函数 日期函数 条件函数 UDTF函数 常用UDTF函数 explode posexplode inline stack json ...