在一些函数需被频繁调用的场景,如:window.onresize、mousemove、scroll滚动事件、上传进度等等,操作频繁导致
性能消耗过高,而造成浏览器卡顿现象,我们可以通过函数节流的方式解决此问题。
   比如我们在window.onresize事件中打印当前浏览器窗口的大小,而拉拽窗口的时候,打印窗口大小的
工作1s内进行了10次。而实际是我们只需2次或3次,这就需要我们按时间段来忽略一些事件请求,比如确保
在500ms内只打印1次。实现代码如下:

        var throttle=function(fn,interval){
var _self=fn, //保存需要被延迟执行的函数引用
timer, //定时器
firstTime=true; //是否是第一次调用
return function(){
var args=arguments,
_me=this;
if(firstTime){ //如果是第一次调用,,则不需要延迟执行
_self.apply(_me,args);
return firstTime=false;
}
if(timer){ //如果定时器还在,说明前一次延迟执行还没有完成
return false;
}
timer=setTimeout(function(){ //延迟500ms执行
clearTimeout(timer);
timer=null;
_self.apply(_me,args);
},interval||500);
}
}
window.onresize=throttle(function(){
console.log(1);
},500);

转载请注明文章出处:http://www.cnblogs.com/jacksplwxy/p/6719606.html

(O)JS高阶函数应用——函数节流的更多相关文章

  1. JS高阶---变量与函数提升

    大纲: 主体: 案例1: 接下来在控制台source里进行断点测试 打好断点后,在控制台测试window .

  2. JS高阶函数的理解(函数作为参数传递)

    JS高阶函数的理解 高阶函数是指至少满足下列条件之一的函数. · 函数可以作为参数被传递 · 函数可以作为返回值输出 一个例子,我们想在页面中创建100个div节点,这是一种写法.我们发现并不是所有用 ...

  3. React.js高阶函数的定义与使用

    /* 高阶函数的简单定义与使用 一: 先定义一个普通组件 二: 用function higherOrder(WrappendComponent) { return } 将组件包裹起来,并用export ...

  4. js高阶函数应用—函数防抖和节流

    高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...

  5. js 高阶函数 闭包

    摘自  https://www.cnblogs.com/bobodeboke/p/5594647.html 建议结合另外一篇关于闭包的文章一起阅读:http://www.cnblogs.com/bob ...

  6. js高阶函数

    我是一个对js还不是很精通的选手: 关于高阶函数详细的解释 一个高阶函数需要满足的条件(任选其一即可) 1:函数可以作为参数被传递 2:函数可以作为返回值输出 吧函数作为参数传递,这代表我们可以抽离一 ...

  7. 浅谈JS高阶函数

    引入 我们都知道函数是被设计为执行特定任务的代码块,会在某代码调用它时被执行,获得返回值或者实现其他功能.函数有函数名和参数,而函数参数是当调用函数接收的真实的值. 今天要说的高阶函数的英文为High ...

  8. JS高阶函数的使用

    1.何为高阶函数呢? JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数.简单来说,就是对其他 ...

  9. JS 高阶函数

    笔记整理自:廖雪峰老师的JS教程 目录 概述 Array中的高阶函数 map(返回新的Array) reduce(返回新的Array) filter(返回新的Array) sort(返回同一Array ...

  10. js高阶函数应用—函数柯里化和反柯里化

    在Lambda演算(一套数理逻辑的形式系统,具体我也没深入研究过)中有个小技巧:假如一个函数只能收一个参数,那么这个函数怎么实现加法呢,因为高阶函数是可以当参数传递和返回值的,所以问题就简化为:写一个 ...

随机推荐

  1. linux基本命令练习

    1. 熟悉linux命令并且练习用法以及应用场景. 初学者完成Linux系统分区及安装之后,需熟练掌握Linux系统管理必备命令,命令包括:cd.ls.pwd.clear. chmod.chown.c ...

  2. css3文本和颜色

    1.文本阴影text-shadow 语法 text-shadow:X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向 ...

  3. linux服务器设置只允许密钥登陆

    首先需要修改一些配置文件 vim /etc/ssh/sshd_config 进入sshd_config文件后需要更改几个地方 PubkeyAuthentication yes #启用公告密钥配对认证方 ...

  4. flume 使用手册

    以下jie皆来自官网: 1:首先版本是flume 1.8 查看版本:  bin/flume-ng version 2:配置与启动 https://flume.apache.org/FlumeUserG ...

  5. perl5

    1.perl包加入环境 export PERL5LIB=/export/personal1/wanglh/.software/perl/lib:$PERL5LIB

  6. 【OpenGL】纹理(Texture)

    纹理是一个2D图片(也有1D和3D),它用来添加物体的细节:这就像有一张绘有砖块的图片贴到你的3D的房子上,你的房子看起来就有了一个砖墙.因为我们可以在一张图片上插入足够多的细节,这样物体就会拥有很多 ...

  7. Android笔记:OptionsMenu

    使用菜单选项OptionsMenu,需要进行以下操作:(1)重写onCreateOptionsMenu方法: public boolean onCreateOptionsMenu(Menu menu) ...

  8. 全国绿色计算大赛 模拟赛第一阶段(C++)第1关:求和

    挑战任务 这次“绿盟杯”大赛,小明作为参赛选手在练习的时候遇到一个问题,他要对一个范围的两个数进行数位的累加,例如有两个数 15,19 则 他们的数位和应该为:1+5+1+6+1+7+1+8+1+9, ...

  9. c语言的基础知识

    break只对应for循环,while循环,switch case分支. (a>b)?y:n    如果A大于B,那么选择Y的结果,如果A小于B,那么选择N的结果. ^在c语言中代表的是按位异或 ...

  10. Could not get lock /var/lib/dpkg/lock更新问题

    发生于apt-get update或apt update时. 常见手段,先试试: sudo rm /var/lib/dpkg/lock sudo rm /var/lib/apt/lists/lock ...