封装防抖函数以及防抖的两种情况

最新推荐文章于 2023-08-16 10:53:35 发布

沁染流年

最新推荐文章于 2023-08-16 10:53:35 发布

阅读量300

点赞数

分类专栏： JavaScript 前端文章标签： js web javascript 前端

本文链接：https://blog.csdn.net/weixin_49210760/article/details/124062900

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

JavaScript

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<button id="btn1">点击1</button>
		<button id="btn2">点击2</button>
	</body>
	<script>
		// 防抖
		// 1.首次是否延迟触发
		// 2. delay秒之内 触发的事件不执行
		function fn1() {
			console.log(1);
		}
		btn1.onclick = debounce(fn1, 1000, true);
		btn2.onclick = debounce(fn1, 1000, false);

		function debounce(fn, delay, triggleNow) {
			var t = null;
			// 返回值
			var callResult = null;

			// 请款重置定器

			debounce.remove = function () {
				clearTimeout(t);
				t = null;
			};

			return function () {
				var that = this;
				// 可能会携带参数
				var args = arguments;

				if (t) {
					clearTimeout(t);
				}

				if (triggleNow) {
					var isdo = !t;
					t = setTimeout(() => {
						t = null;
					}, delay);

					if (isdo) {
						// 第一次进来就直接触发
						callResult = fn.apply(this, arguments);
					}
				} else {
					t = setTimeout(() => {
						callResult = fn.apply(this, arguments);
					}, delay);
				}
				return callResult;
			};
		}
	</script>
</html>

沁染流年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
封装防抖函数以及防抖的两种情况

<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <button
复制链接

扫一扫