手动实现函数节流（throttle）

最新推荐文章于 2021-08-10 21:19:47 发布

我乃小神神

最新推荐文章于 2021-08-10 21:19:47 发布

阅读量533

点赞数

分类专栏：前端小基础文章标签： js 函数节流 throttle 防抖节流

本文链接：https://blog.csdn.net/wonaixiaoshenshen/article/details/106001453

版权

前端小基础专栏收录该内容

32 篇文章 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>

每一秒钟打印一次大哥好

我乃小神神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
手动实现函数节流（throttle）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> /* * 函数节流 * 简单地讲，就是让一个函数无法在很短的时间间隔内连续调用，只有当上一次函数执行后过了你规定的时间间隔，、 * ...
复制链接

扫一扫