(O)JS高阶函数应用——函数节流
在一些函数需被频繁调用的场景,如: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高阶函数应用——函数节流的更多相关文章
- JS高阶---变量与函数提升
大纲: 主体: 案例1: 接下来在控制台source里进行断点测试 打好断点后,在控制台测试window .
- JS高阶函数的理解(函数作为参数传递)
JS高阶函数的理解 高阶函数是指至少满足下列条件之一的函数. · 函数可以作为参数被传递 · 函数可以作为返回值输出 一个例子,我们想在页面中创建100个div节点,这是一种写法.我们发现并不是所有用 ...
- React.js高阶函数的定义与使用
/* 高阶函数的简单定义与使用 一: 先定义一个普通组件 二: 用function higherOrder(WrappendComponent) { return } 将组件包裹起来,并用export ...
- js高阶函数应用—函数防抖和节流
高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...
- js 高阶函数 闭包
摘自 https://www.cnblogs.com/bobodeboke/p/5594647.html 建议结合另外一篇关于闭包的文章一起阅读:http://www.cnblogs.com/bob ...
- js高阶函数
我是一个对js还不是很精通的选手: 关于高阶函数详细的解释 一个高阶函数需要满足的条件(任选其一即可) 1:函数可以作为参数被传递 2:函数可以作为返回值输出 吧函数作为参数传递,这代表我们可以抽离一 ...
- 浅谈JS高阶函数
引入 我们都知道函数是被设计为执行特定任务的代码块,会在某代码调用它时被执行,获得返回值或者实现其他功能.函数有函数名和参数,而函数参数是当调用函数接收的真实的值. 今天要说的高阶函数的英文为High ...
- JS高阶函数的使用
1.何为高阶函数呢? JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数.简单来说,就是对其他 ...
- JS 高阶函数
笔记整理自:廖雪峰老师的JS教程 目录 概述 Array中的高阶函数 map(返回新的Array) reduce(返回新的Array) filter(返回新的Array) sort(返回同一Array ...
- js高阶函数应用—函数柯里化和反柯里化
在Lambda演算(一套数理逻辑的形式系统,具体我也没深入研究过)中有个小技巧:假如一个函数只能收一个参数,那么这个函数怎么实现加法呢,因为高阶函数是可以当参数传递和返回值的,所以问题就简化为:写一个 ...
随机推荐
- HTTPConnectionPool(host:XX)Max retries exceeded with url
爬虫多次访问同一个网站一段时间后会出现错误 HTTPConnectionPool(host:XX)Max retries exceeded with url '<requests.package ...
- DataTable--数据生成datatable
将数据库查出的数据生成datatable 我们一般将数据库查询出的数据用实体接受在泛型集合,然后遍历集合,以将数据绑定到前台展示,在很多情况下,泛型集合不如datatable更方便将数据操作,这里简单 ...
- ABAP 编程
ABAP Programming Language 的内容主要有: 1.数据类型与数据对象 2.内表和内表结构(Internal Table) 3.数据流控制语句 4.模块化(Modularizati ...
- 面试真题--------spring源码解析AOP
接着上一章对IOC的理解之后,再看看AOP的底层是如何工作的. 1.实现AOP的过程 首先我们要明白,Spring中实现AOP,就是生成一个代理,然后在使用的时候调用代理. 1.1 创建代理工厂 ...
- mui-图文列表 图片大小问题
下面是源码,不能调节图片大小 <ul class="mui-table-view"> <li class="mui-table-view-cell mu ...
- yml和properties配置文件区别
我们可以观察到的格式就是yml文件是梯级呈现的,我们应该注意一下几个方面: 1>在properties文件里面的 “ .” 连接在yml文件里面全部换成 ":" 进行连接, ...
- javascript学习笔记(九):DOM操作HTML的各种方法使用
<!DOCTYPE html> <html> <head lang="en"> <meta chaset="UTF-8" ...
- 健壮的网络编程IO函数-RIO包
RIO包 简介 Rio包即为Robust io函数包.包中函数是对Linux基本I/O函数的封装,使其更加健壮.高效,更适用于网络编程. 分析 Rio包由rio_t结构体和系列函数组成. 首先是两个不 ...
- springboot security 获取当前登录用户名
System.out.println(((User)SecurityContextHolder.getContext().getAuthentication().getPrincipal()).get ...
- java 连接sqlserver数据库
1.ResultSet executeQuery(String sql):执行某条查询语句并返回结果public static void main(String[] args) throws Exce ...