【JavaScript】防抖、节流、分时

最新推荐文章于 2023-12-13 15:06:00 发布
最新推荐文章于 2023-12-13 15:06:00 发布
阅读量136 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45389633/article/details/108735377
版权
相关链接

1. js防抖和节流

2. 函数防抖和节流

3. JS的防抖与节流

4. JavaScript专题之跟着underscore学防抖

5. 分时函数 & 节流函数

文章目录

一、防抖

1-1. 【非立即执行】

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<div id="demo"></div>
	<script type="text/javascript">
	// 防抖
	function debounce(fn, wait) {
		var timeout = null;
		return function() {
			if (timeout !== null) clearTimeout(timeout);
			timeout = setTimeout(fn, wait);
		}
	}

	// 处理函数
	function handle() {
		document.getElementById('demo').innerHTML = Math.random();
	}

	// 滚动事件
	window.addEventListener('mousemove', debounce(handle, 1000));

	// 未防抖
	// window.addEventListener('mousemove', handle);
	</script>
</body>
</html>

1-2. 【非立即执行】

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<div id="demo"></div>
	<script type="text/javascript">
	// 防抖
	function debounce(fn, wait) {
		var timeout = null;
		return function() {
			var context = this;
			var args = arguments;
			if (timeout !== null) clearTimeout(timeout);
			timeout = setTimeout(function() {
				fn.apply(context, args);
			}, wait);
		}
	}

	// 处理函数
	function handle() {
		document.getElementById('demo').innerHTML = Math.random();
	}

	// 鼠标移动事件
	window.addEventListener('mousemove', debounce(handle, 1000));

	// 未防抖
	// window.addEventListener('mousemove', handle);
	</script>
</body>
</html>

2. 【立即执行】

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<div id="demo"></div>
	<script type="text/javascript">
	// 防抖
	function debounce(fn, wait) {
		var timeout = null;
		return function() {
			var context = this;
			var args = arguments;
			if (timeout) clearTimeout(timeout);
			var callNow = !timeout;
			timeout = setTimeout(function() {
				timeout = null;
			}, wait);
			if (callNow) fn.apply(context, args);
		}
	}

	// 处理函数
	function handle() {
		document.getElementById('demo').innerHTML = Math.random();
	}

	// 滚动事件
	window.addEventListener('mousemove', debounce(handle, 1000));

	// 未防抖
	// window.addEventListener('mousemove', handle);
	</script>
</body>
</html>

3. 【二合一】

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<div id="demo"></div>
	<script type="text/javascript">
	/**
	 * @desc 函数防抖
	 * @param func 函数
	 * @param wait 延迟执行毫秒数
	 * @param immediate true 表立即执行，false 表非立即执行
	 */

	// 防抖
	function debounce(fn, wait, immediate) {
		var timeout = null;
		return function() {
			var context = this;
			var args = arguments;
			if (timeout) clearTimeout(timeout);
			if (immediate) {
				var callNow = !timeout;
				timeout = setTimeout(function() {
					timeout = null;
				}, wait);
				if (callNow) fn.apply(context, args);
			} else {
				timeout = setTimeout(function() {
					fn.apply(context, args);
				}, wait);
			}
		}
	}

	// 处理函数
	function handle() {
		document.getElementById('demo').innerHTML = Math.random();
	}

	// 立即执行
	window.addEventListener('mousemove', debounce(handle, 1000, true));

	// 非立即执行
	// window.addEventListener('mousemove', debounce(handle, 1000, false));
	</script>
</body>
</html>

二、节流

1. 【时间戳】

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<div id="demo"></div>
	<script type="text/javascript">
	// 节流
	function throttle(fn, wait) {
		var previous = 0;
		return function() {
			var now = Date.now();
			var context = this;
			var args = arguments;
			if (now - previous >= wait) {
				fn.apply(context, args);
				previous = now;
			}
		}
	}

	// 处理函数
	function handle() {
		document.getElementById('demo').innerHTML = Math.random();
	}

	// 滚动事件
	window.addEventListener('mousemove', throttle(handle, 1000));

	// 未防抖
	// window.addEventListener('mousemove', handle);
	</script>
</body>
</html>

2. 【定时器】

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<div id="demo"></div>
	<script type="text/javascript">
	// 节流
	function throttle(fn, wait) {
		var timeout = null;
		return function() {
			var context = this;
			var args = arguments;
			if (!timeout) {
				timeout = setTimeout(function() {
					timeout = null;
					fn.apply(context, args);
				}, wait);
			}
		}
	}

	// 处理函数
	function handle() {
		document.getElementById('demo').innerHTML = Math.random();
	}

	// 滚动事件
	window.addEventListener('mousemove', throttle(handle, 1000));

	// 未防抖
	// window.addEventListener('mousemove', handle);
	</script>
</body>
</html>

3-1. 【二合一】

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<div id="demo"></div>
	<script type="text/javascript">
	// 节流
	function throttle(fn, wait) {
		var timeout = null;
		var startTime = Date.now();
		return function() {
			var curTime = Date.now();
			var remaining = wait - (curTime - startTime);
			var context = this;
			var args = arguments;
			clearTimeout(timeout);
			if (remaining <= 0) {
				fn.apply(context, args);
				startTime = Date.now();
			} else {
				timeout = setTimeout(fn, remaining);
			}
		}
	}

	// 处理函数
	function handle() {
		document.getElementById('demo').innerHTML = Math.random();
	}

	// 滚动事件
	window.addEventListener('mousemove', throttle(handle, 1000));

	// 未防抖
	// window.addEventListener('mousemove', handle);
	</script>
</body>
</html>

3-2. 【二合一】

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<div id="demo"></div>
	<script type="text/javascript">
	// 节流
	function throttle(fn, wait, type) {
		if (type === 1) {
			var previous = 0;
		} else if (type === 2) {
			var timeout = null;
		}
		return function() {
			var context = this;
			var args = arguments;
			if (type === 1) {
				var now = Date.now();
					if (now - previous >= wait) {
					fn.apply(context, args);
					previous = now;
				}
			} else if (type === 2) {
				if (!timeout) {
					timeout = setTimeout(function() {
						timeout = null;
						fn.apply(context, args);
					}, wait);
				}
			}
		}
	}

	// 处理函数
	function handle() {
		document.getElementById('demo').innerHTML = Math.random();
	}

	// 时间戳节流
	window.addEventListener('mousemove', throttle(handle, 1000, 1));

	// 定时器节流
	// window.addEventListener('mousemove', throttle(handle, 1000, 2));
	</script>
</body>
</html>

三、分时

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<div id="demo"></div>
	<script type="text/javascript">
	/**
	 * @desc 分时函数
	 * @param ary 批量操作所需要的数据集
	 * @param fn 封装了批量操作的逻辑函数
	 * @param count 每批操作的数据的数量
	 * @param wait 分批执行的时间间隔
	 */

	// 分时
	function timeChunk(ary, fn, count, wait) {
		var timeout = null;
		var start = function() {
			for (var i = 0; i < Math.min(count || 1, ary.length); i++) {
				var obj = ary.shift();
				fn(obj);
			}
		}
		return function() {
			timeout = setInterval(function() {
				if (ary.length === 0) return clearInterval(timeout);
				start();
			}, wait);
		}
	}
	
	var arr = [];
	for (var i = 1; i <= 100; i++) {
		var span = document.createElement('span');
		span.style.padding = '6px 12px';
		if (i%10 === 0) {
			span.innerHTML = i + '<br />';
		} else {
			span.innerHTML = i;
		}
		arr.push(span);
	}
	var fn = function(ele) {
		document.getElementById('demo').appendChild(ele);
	}
	timeChunk(arr, fn, 10, 1000)();
	</script>
</body>
</html>
iuukai
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js性能优化之分时函数
Daisy花园
04-25 2668
分时函数和函数节流的问题不一样，函数节流针对的事件不是用户主动调用的，前面已经提过了。 函数节流的原理是：延迟当前函数的执行，如果该次延迟还没有完成，那么忽略接下来该函数的请求。也就是说会忽略掉很多函数请求。分时函数处理的问题是用户主动调用的，比如插入千百个节点var arr = []; for (var i = 1; i <= 1000; i++) { arr.push(i) //假设a
JavaScript：防抖与节流
violet_seven的博客
04-29 242
防抖与节流 在进行窗口的resize、scroll、mousemove，输入框内容校验等操作时，如果这些高频事件的处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。 此时可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。 1、防抖（函数防抖） 函数防抖是指触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新...
js分时函数
愚人码头的博客
12-13 348
示例:点击按钮,往页面插入100000个div元素 const btn = document.querySelector('#add'); const datas = new Array(100000).fill(0).map((_, i) =&...
js中性能优化之分时函数
前端三脚猫的博客
06-13 264
一次执行完的函数，拆分成多次执行。
实现JavaScript中的分时函数
ProswpuAlan的博客
02-07 317
在短时间中在页面中添加大量的dom节点让浏览器出现卡顿，解决的方案可以将1秒钟创建1000个节点，改为200ms创建8个节点，这样就实现了分时函数 var timeChunk = function(arr, fn, count){//参数分别为传入的数据，执行的函数，每次执行的数量 var obj; var t; var len = arr.length; var start = fun
JavaScript防抖与节流
geejkse_seff的博客
05-14 173
JavaScript防抖与节流 1 为什么需要防抖和节流 2 防抖与节流原理 3 实现一个防抖函数 3.1 初步实现 3.2 this问题 3.3 event问题 3.4 立即执行 3.5 返回值问题 3.6 取消防抖 3.7 总结 4 实现节流函数 4.1 通过时间戳实现节流 4.2 使用定时器实现节流 4.3 时间戳和定时器组合实现 4.4 节流优化 5 应用场景 1 为什么需要防抖和节流 在前端开发当中，有些交互事件，会被频繁触发，这样会导致我们的页面渲染性能下降，如果频繁触发接口
前端Javascript相关面试基础问答整理md
最新发布
02-26
防抖和节流 - **防抖**：在一系列连续事件触发后，只有最后一次才会被执行。 - **节流**：每隔一段时间只执行一次函数。 #### 14. 作用域和作用域链、执行期上下文 - **作用域**：定义了变量的可访问性。 - **...
swipe_nav:wap应用分类滑动
05-09
例如，可以使用防抖（Debouncing）或节流（Throttling）技术来限制事件处理函数的执行频率，减少重绘和回流。 7. **兼容性处理**：由于不同的浏览器对触摸事件的支持程度不同，可能需要借助像Hammer.js或FastClick...
jQuery京东手机端商品分类滑动切换
06-24
此外，防止连续快速滑动导致的多次请求，可能采用了节流（throttle）或防抖（debounce）技术。 6. **性能考虑**：移动设备的硬件性能相对较低，因此在编写代码时需要特别关注性能。例如，减少DOM操作，利用事件代理...
滚动到“加载数据”，“ Web服务”，“ JavaScript”
04-05
标题中的“滚动到‘加载数据’，‘Web服务’，‘JavaScript’”指的是在网页开发中，通过使用JavaScript和Web服务技术实现一个高效的数据加载机制，即当用户滚动页面时，内容分批次按需加载，而不是一次性加载所有...
javascript:时间空间
04-02
如果一个函数被频繁调用，那么考虑使用函数节流（throttle）或防抖（debounce）技术可以降低调用频率，从而提高性能。 其次，我们讨论空间效率。在JavaScript中，对象和数组是主要的内存占用者。避免创建不必要的...
JavaScript高级函数应用之分时函数
mosaic&Bernie
03-26 307
一、前提介绍：某些函数是用户主动调用的，但因为一些客观的原因，这些函数会严重影响页面的性能。二、应用场景：在短时间内往页面中大量添加DOM节点显然会让浏览器吃不消，往往会导致浏览器的卡顿甚至假死。三、解决方案：以上述添加节点的例子来说明问题，我们将创建节点的工作分批进行，比如把1秒钟创建1000个节点，改为每隔200毫秒创建8个节点。四、实现代码如下：var timeChunk = functio...
关于<script>元素（js两种引用方法：内部嵌入，外部引入）
iuukai
07-12 5836
文章目录一、在HTML中引用JavaScirpt脚本的方法有两种：内部嵌入和外部引用。二、在同一个HTML文档中，调用多个JavaScript脚本。三、<script>元素定义的6个属性。 一、在HTML中引用JavaScirpt脚本的方法有两种：内部嵌入和外部引用。 关于<script>标签的位置问题，虽然<script></script>可以放在...
setTimeout() 与 setInterval() 的区别及使用
iuukai
06-14 5118
Test1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> //变量初始化 var num1 = 0; var num2 = 0; var clock1; var clock2; //定义启动器 function work(ele)
【JavaScript】数值精度与数值范围
iuukai
09-10 3295
文章目录一、整数与浮点数二、精度丢失1. 组成2. 二进制表示3. 如何解决三、整数精度四、数值范围1. 正向溢出与负向溢出2. 利用 Number 对象返回具体最大值和最小值 一、整数与浮点数 JavaScript 内的数字没有 int(整数型) 与 float(浮点型) 之分，即 1 与 1.0 相同，为同一个数。 JavaScript 内所有数字都是浮点数，若遇到需要整数才能运算的情况，JavaScript 会自行将64位浮点数转成32位整数，再进行运算，而这个转换过程，便导致了精度丢失。 0.1 +
【JavaScript】《整体代码script》为何是一个宏任务
iuukai
07-14 2868
JavaScript是一门单线程的语言，因此，JavaScript在同一个时间只能做一件事，单线程意味着，如果在同个时间有多个任务的话，这些任务就需要进行排队，前一个任务执行完，才会执行下一个任务。 有很多小伙伴不明白【整体代码script】为何是一个宏任务，为了让大家更好理解这里举个栗子… 例子① <!-- 脚本 1 --> <script> // 同步 console.log('start1') // 异步宏 setTimeout(() => console.l.
【HTML5】Web SQL Database【已废弃】（可能是最全详解，含各种参数介绍，以及一些SQL语句）
iuukai
07-16 2308
在阅读本篇文章之前，请先注意以下几点声明： 1. 原文：  Beware. This specification is no longer in active maintenance and the Web Applications Working Group does not intend to maintain it further.  译文：   注意。此规范不再处于主动维护中，Web应用程序工作组不打算进一步维护它。 2. 原文：  This document was on th
【HTML5 + API】 地理定位（Geolocation）之【Google 地图 API 用不了？不如换国内地图 API ！！】
iuukai
07-11 1796
文章目录前提百度地图 API （简单教程）1. 获取经纬度2. 处理错误和拒绝3. 在地图中显示结果注意！！！！！ 前提   这几天在菜鸟学习 HTML5 教程，学到地理定位，发现一个很严重的问题，Google 地理位置服务早已不提供给我国，然，各大教程的代码和方法，都是由 Google 服务支持的，那不就不可用了么？   菜鸟教程：HTML5 Geolocation（地理定位）   我的学习方法是必须照着敲一遍，然后再各大浏览器运行测试一遍，若都可兼容运行那我才会去消化掉这些知识。所以，我把代码放去 E
【HTML5 + JavaScript】点击或拖拽上传图片，显示缩略图
iuukai
12-06 1729
传送门： 1. JavaScript 教程 / 浏览器模型 / ArrayBuffer 对象，Blob 对象 2. HTML5 - 通过拖拽读取图片文件（将电脑中图片拖入浏览器并显示） 3. js实现file上传图片在div中显示与点击div触发file表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title..
javascript防抖节流
08-23
JavaScript中的防抖和节流是为了控制函数的执行频率，以提高性能和优化用户体验。 防抖（debounce）是指在一定的时间间隔内，只执行最后一次操作。引用提供了一个自定义的防抖函数示例。该函数接受两个参数：待执行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值