JS之防抖与节流

最新推荐文章于 2023-04-25 10:44:47 发布

磐石BedRock

最新推荐文章于 2023-04-25 10:44:47 发布

阅读量159

点赞数

分类专栏： JS高级文章标签：防抖与节流

本文链接：https://blog.csdn.net/qq_38774121/article/details/104383457

版权

JS高级专栏收录该内容

6 篇文章 0 订阅

订阅专栏

防抖与节流解决了什么？

`解决了事件频繁触发的问题`

`防抖`

新事件的触发，如果上一次事件还没有执行则忽略上一次事件，以最新的事件为标准，允许将多次事件合成一个事件

`节流`

新事件的触发，如果上一次事件还没有执行则忽略本次事件，以上一次事件为标注，不允许在X秒内执行次数超过一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>防抖</title>
		<style type="text/css">
			#container{
				width: 100%;
				height: 300px;
				background-color:#353535 ;
				color: white;
				text-align: center;
				line-height: 300px;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div id="container">0</div>
	</body>
	<script src="main.js" type="text/javascript" charset="utf-8"></script>
</html>

var container = document.getElementById('container');
var n = 1
function transformHtml(e){
	console.log(e)
	container.innerHTML = n++;
	console.log(this)
}

// document.onmousemove = transformHtml
// document.onmousemove = Antishake(transformHtml, 1000)
// document.onmousemove = throttle(transformHtml, 1000)
document.onmousemove = Datethrottle(transformHtml, 1000)

// 防抖
/*
	新事件的触发，如果上一次的事件还没有执行则忽略上一次事件，以最新的事件为准。允许我们将多个连续的调用合并成一个
*/
function Antishake(fn, wait){
	var timer;
	var context = this;							// 保留this
	return function(){
		clearTimeout(timer);
		var arg = arguments
		console.log(arg)
		timer = setTimeout(function(){
			fn.apply(context, arg)
		}, wait)
	}
}

// 节流
/*
	新事件的触发，如果上一次的事件还没有执行完，则忽略本次事件，以上一次的事件为标准，不允许函数在X秒内执行的次数超过一次
*/
// 定时器节流
function throttle(fn, wait){
	var timer;
	var context = this;
	return function(){
		var arg = arguments
		if(!timer){
			timer = setTimeout(function (){
				fn.apply(context, arg)
				timer = null;
			}, wait)
		}
	}
}

// 时间戳节流
function Datethrottle(fn, wait){
	var context, args;
	var pervious = 0;
	return function(){
		var now = +new Date();
		context = this;
		args = arguments;
		// 触发函数的当前时间 - 上一次记录的时间 > 节流的时间(如果比节流的时间小，那就不触发，等待旧的事件触发完，再触发新的)
		if(now - pervious > wait){
			fn.apply(context, args);
			pervious = now;
		}
	}
}

具体参考：
https://github.com/mqyqingfeng/Blog/issues/22

https://segmentfault.com/a/1190000009831691

磐石BedRock

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS之防抖与节流

防抖与节流解决了什么？解决了事件频繁触发的问题防抖新事件的触发，如果上一次事件还没有执行则忽略上一次事件，以最新的事件为标准，允许将多次事件合成一个事件节流新事件的触发，如果上一次事件还没有执行则忽略本次事件，以上一次事件为标注，不允许在X秒内执行次数超过一次<!DOCTYPE html><html> <head> <meta char...
复制链接

扫一扫