防抖与节流

最新推荐文章于 2023-03-27 14:48:08 发布

--新芽-

最新推荐文章于 2023-03-27 14:48:08 发布

阅读量94

点赞数 1

本文链接：https://blog.csdn.net/hhhhhhhhhtr/article/details/108537415

版权

防抖

就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

例子：监听浏览器滚动事件

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
	<style>
        div{
		height:1200px
		}
	</style>
</head>
<body>
   <div></div>
	
<script>
function deboumce(fn,dely){
   let timer=null
   return function(){
   if(timer){
		clearTimeout(timer)
   }
	timer=setTimeout(fn,dely)
	
   }
}
function showTop(){
		var scrolltop=document.body.scrollTop||document.documentElement.scrollTop;
		console.log('滚动条位置'+scrolltop)
}
window.onscroll=deboumce(showTop,1000)
 </script>
</body>
</html>

节流

连续触发事件但是在 n 秒中只执行一次函数。

效果：如果一直拖着滚动条进行滚动，那么会以1s的时间间隔，持续输出当前位置和顶部的距离

<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
	
	<style>
        div{
		height:1200px}
	</style>
</head>
<body>
   <div></div>
	
<script>

function showTop(){
		var scrolltop=document.body.scrollTop||document.documentElement.scrollTop;
		console.log('滚动条位置'+scrolltop)
}
  function throttle(fn,delay){
	let valid=true
	return function(){
		if(!valid){
			return false
		}
		valid=false
		setTimeout(()=>{
			fn()
			valid=true;
		},delay)
	}
  }
  
  window.onscroll=throttle(showTop,1000)
 </script>
</body>
</html>