JS函数节流代码实现
函数被频繁调用场景
Js中的函数大多数情况下都是由用户主动调用触发的,一般不会遇到性能相关的问题。但在一些少数情况下,函数的触发不是由用户直接控制。在这些场景下,函数有可能被非常频繁地调用,而造成大的性能问题。
比如以下场景:
- window.onresize事件。如果我们给window对象绑定了resize事件,当浏览器窗口大小被改变的时候,这个事件的触发的频率非常高。(其实任何元素节点也是可以绑定resize事件的,如何实现可参考 如何给div绑定resize事件。也可以使用第三方库 resize-observer-polyfill)
- mousemove事件。
- DOM变化观察者MutationObserver。dom的变化造成观察者对象被频繁触发。
函数节流的原理:
函数节流的原理就是使用定时器来控制函数调用。当触发一个事件函数时,先setTimout让这个事件延迟一会再执行,如果在这个时间间隔内又触发了事件,那我们就clear掉原来的定时器,再setTimeout一个新的定时器延迟一会执行。
代码实现
var throttle=function(fn,interval){
var _self=fn; //保存需要被延长执行的函数引用
var timer;
var firstTime=true; //是否是第一次调用 return function (){
var args=arguments;
var _this=this;
if(firstTime){ //如果第一次调用,不需要延迟执行
_self.apply(_this,args);
return firstTime = false;
}
if(timer){ //如果定时器还在,说明前一次延迟执行还没有完成
return false;
}
timer = setTimeout(function(){ //延迟一段时间执行
clearTimeout(timer);
timer=null;
_self.apply(_this,args);
},interval || 500);
};
};
方式1
var throttle2 = function (callback, delay, trailingTimeout) {
var leadingCall = false,
trailingCall = false,
lastCallTime = 0; function resolvePending() {
if (leadingCall) {
leadingCall = false;
callback();
}
if (trailingCall) {
proxy();
}
} function timeoutCallback() {
requestAnimationFrame(resolvePending);
} function proxy() {
var timeStamp = Date.now();
if (leadingCall) {
if (timeStamp - lastCallTime < trailingTimeout) {
return;
}
trailingCall = true;
} else {
leadingCall = true;
trailingCall = false;
setTimeout(timeoutCallback, delay);
}
lastCallTime = timeStamp;
}
return proxy;
};
方式2
代码测试
window.onresize=throttle(function(){
console.log(1);
},1000);
JS函数节流代码实现的更多相关文章
- 也谈js函数节流
1.什么是js函数节流 其本质就是不让某些代码(函数)在没有间断的情况下连续重复执行,目的就是让执行函数的请求停止了一段时间后才执行. 2.函数节流运用的场景 窗口大小的改变(resize事件),滚动 ...
- js 函数节流和防抖
js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...
- Underscore.js 函数节流简单测试
函数节流在日常的DOM界面数据交互中有比较大的作用,可以减少服务器的请求,同时减少客户端的内存影响 Underscore.js 本省就包含了函数节流的处理函数 _.throttle 和 _.debo ...
- 结构-行为-样式-Js函数节流
最近一个面试官问了我一个函数节流的问题,然后感觉自己工作中遇到过这个问题,但是不知道这种形式就是函数节流.下面我来说下这个Js的高级问题,思路:函数节流就是防止用户高频调用某个事件而做的Js层面的处理 ...
- 深入理解JS函数节流和去抖动
一.什么是节流和去抖? 1.节流 节流就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不 ...
- JS 函数节流与防抖
前言 事件的触发权很多时候属于用户,可能会出现下列问题: 向后台发送数据,用户频繁触发,对服务器造成压力: 一些浏览器事件,如window.onresize,window.mousemove等,触发的 ...
- 在vs.net 2010,2015 等版本,给JS函数添加代码提示\注释
经常编写JS的朋友常常会因为函数写多了,隔一段时间就会忘记了函数的用途,或者函数里带的参数作用情况,这个时候会联想到VS工具里的强大提示功能,多希望也能在JS上实现呀,告诉你,这个想法并不是多难,VS ...
- js 函数节流throttle 函数去抖debounce
1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...
- js函数节流和函数防抖
概念解释 函数节流: 频繁触发,但只在特定的时间内才执行一次代码 函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码 函数节流 函数节流应用的实际场景,多数在监听页面元素滚动事件的 ...
随机推荐
- struts2 <allowed-methods > 标签配置
1.在struts2 2.5版本中添加了对方法访问的权限,如果没有被添加到<allow-method> 方法的标签,将会报一下错误 5:05:18.078 [http-apr-8020 ...
- R Programming week1-Reading Data
Reading Data There are a few principal functions reading data into R. read.table, read.csv, for read ...
- 搜索可用docker镜像
简介:这一步的目标是学会使用docker search命令来检索可用镜像. 搜索可用的docker镜像 目标: 提示: 正确的命令: 搜索可用的docker镜像 使用docker最简单的方式莫过于从现 ...
- (二)Redis for 阿里云公网连接
目录 (一)Redis for Windows正确打开方式 (二)Redis for 阿里云公网连接 (三)Redis for StackExchange.Redis 阿里云目前仅支持内网连接Redi ...
- PHP网络协议相关考点
HTTP状态码 HTTP状态码(HTTP Status Code)是用以表示网页服务器HTTP响应状态的3位数字代码. HTTP状态码主要有5种,代表5种不同类型的响应: 1xx:信息性状态码,代表接 ...
- 关于Maven项目的pom.xml中的依赖或插件失效的解决方法
1.请将<dependency>标签包含的依赖从<dependencyManagement>中拿出来,单独放在<dependencies>标签里面.2.请将< ...
- 怎么在在php配置文件中打开php_fileinfo扩展
运行composer下载文件时的相关报错截图 处理方法: 在php配置文件中打开php_fileinfo扩展 你需要在查看是否有这个扩展包, 如果有, 那就在php.ini写 extension=ph ...
- 全国绿色计算大赛 模拟赛第一阶段(Python)
第1关求和 class Task: def getSum(self, num1, num2): sum = 0 for i in range(num1, num2 + 1): while (i != ...
- ID字段不采用数据库自增长的几点理由
一个小程序,最初采用了 SqlServer 数据库,后来为了便于部署,转而采用了 Firebird 嵌入式数据库.在重构代码转到 Firebird 的过程中,对“数据实体的数据表的ID字段是否应该使用 ...
- spring data jpa方法命名规则
关键字 方法命名 sql where字句 And findByNameAndPwd where name= ? and pwd =? Or findByNameOrSex where name= ? ...