防抖与节流

最新推荐文章于 2023-09-14 11:53:26 发布

evenzx

最新推荐文章于 2023-09-14 11:53:26 发布

阅读量127

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/evenzx/article/details/120192603

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>防抖与节流 原生JS实现</title>
</head>
<body>
	<input type="text">
	<input type="submit" id='input'>	
	<script>
	let btn=document.getElementById('input');
	// btn.addEventListener('click',submit)
//  防抖
	// btn.addEventListener('click',debounce(submit,2000),false);
    // function debounce(fn,timer){
	// 	var t=null;
    //    return function(){
	// 	var firstClick=!t;
	// 	   if(t){ clearTimeout(t) }
	// 	   if(firstClick){fn.apply(this,arguments);}
    //        t=setTimeout(()=>{
	// 			t=null;
	// 		},timer)
	//    }
	// }

	btn.addEventListener('click',throttle(submit,2000),false);
    function throttle(fn,dey){
		var begin=0;
       return function(){

		var cur=new Date().getTime();
		console.log(cur);
		if(cur-begin>dey){
		 fn.apply(this,arguments);
		 begin=cur;
		}
	
	   }
	}

//  模拟请求 打印1
function submit(e){
	// console.log(1);
	console.log(e,this);
}

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