JS闭包，防抖和节流

最新推荐文章于 2024-10-19 16:44:53 发布

世界还赞颂沉默吗

最新推荐文章于 2024-10-19 16:44:53 发布

阅读量204

点赞数

CC 4.0 BY-SA版权

分类专栏： #JS 文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/qq_43574741/article/details/120018034

#JS 专栏收录该内容

6 篇文章

订阅专栏

Js闭包

参考链接

function a() {
    var counter = 0;
    return function () {return counter += 1;}
}
var add = a();
add();
add();
add();

形式：函数里面嵌套函数
作用：访问函数的私有变量
特性：如上例，a函数返回一个匿名函数给add，并且add使用了a的变量counter，所以a函数不会被销毁回收，变量counter一直存在内存中，且只有add()可以访问。

Js防抖和节流

参考链接

防抖debounce： 当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。
节流throttling： 节流的策略是，固定周期内，只执行一次动作，若有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期。

如下对click添加防抖，时间间隔1s

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>防抖和节流</title>
	</head>
	<body>
		<input type="button" id='button' value="0" />
		<script>
			function debounce(fn, delay) {//防抖
				let timer = null //借助闭包
				return function() {
					if (timer) {
						clearTimeout(timer)
					}
					timer = setTimeout(fn, delay) // 简化写法
				}
			}
			let node=document.getElementById('button');
			function x(){
				node.value++;//这里如果使用this会指向window
			}
			node.onclick = debounce(x,1000);
		</script>
	</body>
</html>

如下对click添加节流，间隔时间为1s

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>防抖和节流</title>
	</head>
	<body>
		<input type="button" id='button' value="0" />
		<input type="button" id='button1' value="0" />
		<script>
			function debounce(fn, delay) {//防抖
				let timer = null;
				return function() {
					if(timer) {
						clearTimeout(timer);
					}
					timer = setTimeout(fn, delay);
				}
			}
			
			let node = document.getElementById('button');
			function x() {
				node.value++; //这里如果使用this会指向window
			}
			node.onclick = debounce(x, 1000);

			function throttling(fn,delay){//节流
				let flag = true;//工作中
				
				return function(){
					if(!flag) return false;
					flag = false;//挂机
					setTimeout(function(){
						fn();
						flag = true;//继续工作
					},delay);
				}
				
			}
			let node1 = document.getElementById('button1');
			function x1() {
				node1.value++; //这里如果使用this会指向window
			}
			node1.onclick = throttling(x1, 1000);
		</script>
	</body>
</html>