javascript 函数节流 throttle 解决函数被频繁调用、浏览器卡顿的问题
2024-09-01 16:23:22
* 使用setTimeout
index.html
<html>
<head>
<meta charset="UTF-8">
<title>throttle</title>
</head>
<body>
<h2>函数节流 解决函数被频繁调用、浏览器卡顿的问题</h2>
<script src="js/throttle.js"></script>
</body>
</html>
js/throttle.js
// 函数节流 解决函数被频繁调用、浏览器卡顿的问题
var throttle = function(fn, interval) {
var __self = fn, // 保存需要被延迟执行的函数引用
timer, // 定时器
firstTime = true; // 是否第1次被调用
return function() {
var args = arguments, __me = this; // 如果第1次被调用, 不需要延迟执行
if (firstTime) {
__self.apply(__me, args);
return firstTime = false;
}
// 如果定时器还在, 说明前一次延迟执行还没有完成
if (timer) {
return false;
}
// 延迟一段时间执行
timer = setTimeout(function() {
clearTimeout(timer);
timer = null;
__self.apply(__me, args);
}, interval || 500);
}
} var dom = document.createElement("h1");
dom.innerHTML = 0;
document.body.appendChild(dom); window.onresize = throttle(function() {
var n = parseInt(dom.innerHTML);
dom.innerHTML = ++n;
}, 500);
Run:
php -S 0.0.0.0:9000
调整浏览器窗口大小
最新文章
- [Linux] Linux常用文本操作命令整理
- 在Openfire中使用自己的数据表之修改系统属性
- LNK2005 连接错误解决办法
- AMD规范基本结构
- Eclipse - JDK内存配置- 环境配置
- C#中 Thread.Sleep精度问题
- SoapUI入门
- 洛谷P1471 方差
- 怎么从代码中拿到栈回溯信息(call stack trace)
- 【zz】C++中struct与class的区别
- mac缺少预编译.a问题
- sublime 快键
- spark aggregate
- LintCode 推断一个二叉树树是否是还有一个二叉树的子书
- jQuery+JSON+jPlayer实现QQ空间音乐查询
- NodeJs学习笔记(四)---单元测试
- Python-String字符串的相关方法
- SpringCloud系列——SSO 单点登录
- 基于MAVEN使用IDEA创建dubbo入门项目图文教程
- python学习Day12 函数的默认值、三元表达式、函数对象(函数名)的应用场景、名称空间与作用域