javaScript防抖

最新推荐文章于 2024-07-09 09:42:10 发布

野生java研究僧

最新推荐文章于 2024-07-09 09:42:10 发布

阅读量575

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_46188681/article/details/125985758

版权

前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

文章目录

- javaScript防抖技术
- 什么是防抖？

javaScript防抖技术

什么是防抖？

所谓的防抖，就是防止你手抖，多次点击或者，多次触发事件，比如说你购买东西，网卡，你一直点击付款按钮，其实在指定时间内只需要执行一次即可。或者在做联想搜索的时候也是这样，不要输入框的值改变就去请求接口，而是等用户感觉输入完，然后再去请求接口，这样能减少和后端交互。

<body>

		<button id="copyBtn">复制</button>

		<script>
			/**
			 * 防抖函数
			 * @param {Object} func 需要执行的业务函数
			 * @param {Object} delay 间隔时间
			 * @param {Object} option 需要传递的参数
			 */
			function debounce(func, delay, option) {
				let timer;
				return function() {
					let _this = this;
					clearTimeout(timer);
					timer = setTimeout(function() {
						func.call(_this, option)
					}, delay)
				}

			}

			/**
			 *给按钮绑定一个事件，并且多次在一秒内点击都算一次，能携带参数
			 * @param {Object} obj
			 */
			function task(obj) {
				console.log("this:", this);
				console.log(obj)
			}

			// 绑定输入
			let copyBtn = document.getElementById('copyBtn');
			copyBtn.addEventListener('click', debounce(task, 1000, {
				name: 'admin'
			}));
		</script>
	</body>