防抖 && 节流

防抖 && 节流

前端页面中,用户会频繁的触发一些事件,而对于DOM的操作,资源的加载,等耗费性能的处理,都有肯可能造成页面卡顿,甚至浏览器的崩溃.函数节流和防抖就是处理这类事件.

1. 节流

   函数节流就是预定只有在大于等于执行周期的时候,才会执行,在周期内调用不执行.

   举个例子: 一个按钮绑定了一个函数,点击一次按钮,函数执行一次,如果多次点击,函数执行多次,那么在这个过程之中,这个点击事件如果是加载什么网络资源,频繁的加载会造成浏览器阻塞,点击量过大的点击,比如脚本恶意攻击,会造成服务器瘫痪之类的问题.

   所以我们利用节流: 设置3秒内只能点击一次,多次点击无效

   应用场景:

   1. 窗口调整
   2. 页面滚动
   3. 抢购点击

   
   		// <span>1</span>
   		// <button>click</button>
   	
   	<script type="text/javascript">
   		var span = document.getElementsByTagName('span')[0]
   
   		var button = document.getElementsByTagName('button')[0]
   		
   		 function throttle (handle, wait) {
   		 	// body... 
   		 	// 参数 第一个是要函数, 第二个就是时间周期
   		 	var oldTime = 0
   		 	// 这个返回的函数,是作为事件的处理函数 在这个例子中就是 onclick 中的处理函数
   		 	return function (e){
   		 		// this 指向的是 谁调用就是谁
   		 		let nowTime = new Date().getTime()
   
   		 		if (nowTime - oldTime > wait) {
   		 			// apply 中第一个this 就是调用这个函数,
   		 			// 第二个参数数组 arguments,就是这个传入的参数列表
   		 			handle.apply(this, arguments)
   
   		 			oldTime = nowTime
   		 		}
   		 	}
   		 }
   		 function buy (e) {
   		 	// 如果不在handler 中不添加 apply(this, arguments)
   		 	// 那么这个this 就是指向的是window
   		 	// 使用apply 改变this 的指向
   		 	console.log(this)
   
   		 	span.innerText = parseInt(span.innerText) + 1
   		 }
   		 
   		button.onclick  = throttle(buy, 1000)
   	</script>
   													--------------- <渡一教育>的js视频
   

   2. 防抖

   引用别人说的就是,函数在执行一次以后在某一段时间以内,不能再次执行,如果在这么一段时间内,触发这个函数,那么就重新计算等待时间.

   function debounce(handel, delay) {
     let timer
     return function () {
       if (timer) {
         clearTimeout(timer)
       }
       timer = setTimeout(() => {
         handle.apply(this, arguments)
       }, delay)
     }
   }
   

   函数防抖和函数节流 区别就是,函数节流就是规定三秒钟执行一次,你一直按按钮也只是三秒执行一次,防抖规定三秒执行一次,你一直摁,不好意思你犯规了,继续等三秒,