手动实现函数节流（throttle）
关注我，不错过每一次更新。
手动实现函数节流（throttle）
我乃小神神
发布于 2020-05-18 08:01:39
发布于 2020-05-18 08:01:39
代码可运行
运行总次数：0
代码可运行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
/*
* 函数节流
* 简单地讲，就是让一个函数无法在很短的时间间隔内连续调用，只有当上一次函数执行后过了你规定的时间间隔，、
*
*/
<body>
<script>
function throttle(fn,incomingTime){
let time=''
return function(){
let calculateTime= + new Date()
if(calculateTime -time>incomingTime|| !time){
fn()
time=calculateTime
}
}
}
let fn=()=>{
console.log("大哥好")
}
setInterval(throttle(fn,1000),1000)
function throttle(fn) {
let canRun = true; // 通过闭包保存一个标记
return function () {
if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
canRun = false; // 立即设置为false
setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
fn.apply(this, arguments);
// 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
//当定时器没有执行的时 候标记永远是false，在开头被return掉
canRun = true;
}, 500);
};
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));
</script>
</body>
</html>每一秒钟打印一次 大哥好
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/05/08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
相关推荐
javaScript 函数节流
更多 >
腾讯云开发者
