关于JS中的防抖和节流

 关于JS中的防抖和节流

		/* 关于防抖和节流	
			防抖:避免把一次事件执行多次，如下拉滚动条时，触发多次方法，事实上只需要触发最后一次 「防抖重在清零 clearTimeout(timer)」
			节流:控制事件发生的频率，每隔一段时间执行一次 「节流重在开关锁 timer=null」
		*/
		
		/* ======== 一、防抖 ========  */

		//定义一个防抖函数,一般都是公共方法
		//第一个参数为需要执行防抖的方法，第二个为等待的时间(wait=500表示给不传wait的时候，默认值为500)
		function debounce(fun, wait = 500) {
			let timer = null;
			return function(event) {
				if (timer) {
					clearTimeout(timer);
				}
				timer = setTimeout(() => {
					fun.apply(this, arguments)
				}, wait);
			}
		}
		//调用防抖,第一个参数传入一个需要执行的防抖的函数，第二个如果不传默认值为500
		window.onmousemove = debounce(function(event) {
			console.log(`当前X坐标:${event.clientX},当前Y坐标:${event.clientY}`);
		}, 1000)

		/*  ======== 二、节流 ======== */

		//定义一个节流函数,一般都是公共方法
		//第一个参数为需要执行节流的方法，第二个为等待的时间(wait=500表示给不传wait的时候，默认值为500)
		function throttle(fun, wait = 500) {
			let occupy = true
			return function(event) {
				if (!occupy) {
					return 0
				}
				occupy = false
				setTimeout(() => {
					fun.apply(this, arguments)
					occupy = true
				}, wait)
			}
		}
		//调用节流,第一个参数传入一个需要执行的防抖的函数，第二个如果不传默认值为500
		window.onscroll = throttle(function() {
			console.log(`当前距离顶部:${document.documentElement.scrollTop}`);
		}, 1000)