js实现函数的防抖与节流-网页编程网

当前位置：主页 >> JavaScript >> 正文

js实现函数的防抖与节流

阅读：2574 输入：2022-08-12 14:43:07

<body>
<p>函数的防抖与节流</p>
<p>防抖表示10个人要给老师交作业太繁琐，只要最后一个人统一交就行，若服务器与带宽极好，也可不考虑防抖</p>
<p>节流，多次合并成一次（每次都有效），如文章的定时保存，非每个字都保存，把多次合并在一次</p>
<input id='inp' /><br />
<input id='inp2' /><br />
<input id='inp3' />
<script>
var inp=document.getElementById('inp')
var inp2=document.getElementById('inp2')
var inp3=document.getElementById('inp3')
//1按键停止500ms后再取结果
var t=null
inp.oninput=function (e) {
	clearTimeout(t)
	t=setTimeout(function(){
		console.log('本次内容，',e.target.value)
	},500)
}
//2.防抖函数，传入要加入防抖特点的函数，返回一个带有防抖特点的
function debounce(fn,wait) {
	var t=null
	return function(){
		clearTimeout(t)
		var self=this
		var args=arguments
		t=setTimeout(function(){
			fn.apply(self,args)
		},wait)
	}
}
inp2.oninput=debounce(function(e){
	console.log(e.target.value)
},500)
//3.防抖，多次合并成一次（其他都无效）
//3.节流，
function throttle(fn,wait){
	var t=null
	return function(){
		var self=this
		var args=arguments
		if(t){
			return
		}
		t=setTimeout(function(){
			fn.apply(self,args)
			t=null
		},wait)
	}

}
inp3.oninput=throttle(function(e){
	console.log('已保存，文章内容是',e.target.value)
},500)
</script>
</body>

上一篇：CSS3用hover实现百叶窗动画
下一篇：css3应用transition-duration实现九宫格图片旋转动画

相关阅读: 一句话学会js闭包; js闭包，什么情况下用闭包; javascript表格rows与cells运用，闭包的应用