input输入框实时监控并实现延迟发起请求

最新推荐文章于 2025-06-04 16:44:42 发布

原创最新推荐文章于 2025-06-04 16:44:42 发布 · 9.5k 阅读

3 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种实时监控input输入框并实现延迟发起请求的方法，通过监听input和propertychange事件，当输入值变化时判断是否执行请求操作，并引入了延迟处理逻辑来优化请求频率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input输入框实时监控并实现延迟发起请求

实时监控input代码

autoWatch:function(){
			var that=this;
			var $ele=$(this.element);
			$ele.on('input propertychange',function(){
				//console.log($(this));
				var oldValue=$(this).data('oldValue');
				var newValue=$(this).val();
				if(oldValue==newValue){
					//console.log('oldValue==newValue');
					that.show();
					return false;
				}else{
					//that.requestData(newValue);
					  that.delayRequest(newValue,0);
				}
			})
		}

延迟处理代码

 var timer=false //定义全局timer
delayRequest:function(newValue,i){//延时请求处理
			var that=this;
			var j=10;
			if(timer){
				clearInterval(timer);
			}
			timer=setInterval(function(){
				++i;
				if(i==j){
					console.log(i,j);
					that.requestData(newValue);
					clearInterval(timer);
				}
			},100);	
		}

i初始值为0 一秒后执行请求调用that.requestData();