js防抖和节流

最新推荐文章于 2024-11-13 15:29:17 发布

无辜小白

最新推荐文章于 2024-11-13 15:29:17 发布

阅读量79

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/qq_54382144/article/details/120646063

版权

本文探讨了JavaScript中的事件处理优化技术，包括节流和防抖的实现。通过示例代码展示了如何在点击事件中应用这两种技术，以限制函数的执行频率，提高页面性能。内容涵盖了变量声明、事件监听以及节流和防抖函数的定义和使用，适合前端开发者深入理解性能优化。

摘要由CSDN通过智能技术生成

<script type="text/javascript">
	var boss = document.querySelector(".boss");
	var num = parseInt(boss.innerHTML);
	var bossTime=null;
	var bol = true;
	// 节流
	// boss.onclick = function(){
	// if(bol){
	// bol = false;
	// bossTime = setTimeout(function(){
	// num++;
	// boss.innerHTML = num;
	// bol=true;
	// clearTimeout(bossTime);
	// },1000)
	// }
	// }
	// 防抖
	// 执行最开始的一次
	// boss.onclick = function(){
	// clearTimeout(bossTime);
	// if(bol){
	// num++;
	// boss.innerHTML = num;
	// bol=false;
	// }else{
	// bossTime = setTimeout(function(){
	// bol = true;
	// },1000)
	// }
	// }
	// 执行最后一次
	// boss.onclick = function(){
	// clearTimeout(bossTime);
	// bossTime = setTimeout(function(){
	// num++;
	// boss.innerHTML = num;
	// },1000)
	// }
	</script>

let num = 1;
	let content = document.getElementById('content');

	function count() {
	content.innerHTML = num++;
	};
	content.onmousemove = count;
	// 短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。
	function debounce(func, wait) {
	let timer;
	return function() {
	let context = this; // 注意 this 指向
	let args = arguments; // arguments中存着e

	if (timer) clearTimeout(timer);

	timer = setTimeout(() => {
	func.apply(this, args)
	}, wait)
	}
	}
	content.onmousemove = debounce(count,1000);

	// // 立即执行版
	// function debounce(func, wait) {
	// let timer;
	// return function() {
	// let context = this; // 这边的 this 指向谁?
	// let args = arguments; // arguments中存着e

	// if (timer) clearTimeout(timer);

	// let callNow = !timer;

	// timer = setTimeout(() => {
	// timer = null;
	// }, wait)

	// if (callNow) func.apply(context, args);
	// }
	// }
	// 时间戳版
	// function throttle(func, wait) {
	// let previous = 0;
	// return function() {
	// let now = Date.now();
	// let context = this;
	// let args = arguments;
	// if (now - previous > wait) {
	// func.apply(context, args);
	// previous = now;
	// }
	// }
	// }
	// content.onmousemove = throttle(count,2000);

	// 定时器版
	// function throttle(func, wait) {
	// let timeout;
	// return function() {
	// let context = this;
	// let args = arguments;
	// console.log(timeout);
	// if (!timeout) {
	// timeout = setTimeout(() => {
	// timeout = null;
	// func.apply(context, args)
	// }, wait)
	// }
	// }
	// }