JS防抖示例

最新推荐文章于 2025-01-13 13:51:59 发布

嗯嗯嗯卫

最新推荐文章于 2025-01-13 13:51:59 发布

阅读量115

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/u010210963/article/details/128904858

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	输入字符：<input type="text" name="" id="inp1" value="" /><br /><br />
	防抖效果：<input type="text" name="" id="inp2" value="" readonly/>

	<body>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//防抖封装 fn:函数，time:延迟时间
			function preventJitter(fn, time) {
				var delaySearch = null;
				return function() {
					if (delaySearch != null) {
						window.clearTimeout(delaySearch);
					}
					
					delaySearch = setTimeout(()=>{
						fn.call(this);
					}, time)
					
					//兼容IE写法
					/* if (delaySearch != null) {
						window.clearTimeout(delaySearch);
					}
					var thisR=this;
					delaySearch = setTimeout(function(){
						fn.call(thisR);
					}, time) */
				}
			}

			$("#inp1").on("input", preventJitter(function() {
				$("#inp2").val($(this).val())
			}, 500))

		</script>
	</body>
</html>