JS之防抖（debounce）和节流（throttle）以及其使用场景

防抖（debounce）
当事件高频率触发时（keyup事件，scroll事件，浏览器大小），为了不加重浏览器的负担，而仅仅在其结束后的一段时间再进行相应的操作

  // 最实在的写法
  	let timer = null
	ipt.addEventListener('keyup',function(event) {
		// 如果有清空
		if (timer) {
			clearTimeout(timer)
		}
		timer = setTimeout(function() {
			console.log(ipt.value)
			timer = null
		},1500)
	})

上面的这种写法显然不合理,如果有多个元素想要实现防抖操作就不可以了，封装一下

function debounce(fn,detail) {
	 let timer = null
	 return function() {
	 	if(timer == null) {
	 		clearTimeout(timer)
		}
		timer = setTimeout(fn,detail)
	 }
}
function testfn() {
	console.log("操作函数")
}
bnt.addEventListener('keyup',debounce(testfn,1000))

防抖（debounce）应用场景
场景一： 搜索场景，输入搜索关键字以后，会在停留几秒后，做出搜索答案
场景二： 浏览器滚动条滚动到一定的程度的时候，会有一个向上的箭头出现

节流（throttle）

当特定事件被持续触发的时候，为了避免浏览器资源被过度占用，保证在一定的时间内仅被调用一次。

function throttle(fn,detail = 200) {
		let timer = null
		return function() {
			if (timer) { return }
			timer = setTimeout(() => {
				fn.apply(this,arguments)
				timer = null
			},detail)
		}
	}

	ipt123.addEventListener("drag",throttle(function(event) {
		console.log(event)
			console.log(event.offsetX,event.offsetY)

	},1000))

	ipt123.addEventListener("drag",throttle(function(event) {
		console.log(event)
			console.log(event.offsetX,event.offsetY)

	},1000))

节流场景
drag被不断的调用，保证在一段时间内仅被调用一次