input输入，防抖处理

是我呀！卡布达

于 2023-08-04 10:01:56 发布

阅读量536

点赞数

文章标签： javascript 前端开发语言搜索引擎

本文链接：https://blog.csdn.net/weixin_40745445/article/details/132098011

版权

<!DOCTYPE html>
<html>
	<head lang="zh-CN">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>模拟datalist标签</title>
		<style>
			body {
				margin: auto;
				text-align: center;
			}

			#dataL {
				width: 500px;
				padding: 0;
				margin: auto;
				margin-top: 200px;
			}

			#dataL input {
				width: 100%;
				height: 1.85em;
				padding: 0;
				margin: 0;
				line-height: 1.8em;
				outline: none;
				border: none;
				border: 1px solid darkblue;
			}
		</style>
	</head>
	<body >
		<div id="dataL">
			<input type="text" id="dataInput" placeholder="请输入..." />
		</div>
		<script src="js/jquery.min.js"></script>
		<script>
			/* 防抖函数 */
			const getData = (param) => {
				console.log(param);
			}
			const dataInput = document.querySelector('#dataInput');
			function debounce (fun,duration = 1000){
				let timerId;//记录上一次计时器的
				// ...args 不管什么参数类型，用这个（剩余参数）传值
				return function(...args) {
					//先把上次的计时器给清除，开始这次的计时
					clearTimeout(timerId);
					timerId = setTimeout(function() {
						fun(...args);
					}, duration);
				}
			}
			const updateHandler = debounce(getData);
			const handler = (param) => {
				// console.log(param);
				//updater 实时请求的函数
				updateHandler(param);
				//fun()1 不需要实时变化得数据
				//fun()2不需要实时变化得数据
			}
			
			dataInput.oninput = function() {
				var str = $('#dataInput').val();
				handler(str);
			};
			/* 防抖函数 */
			
			
			
		</script>
	</body>
</html>