防抖和节流(使用场景以及区别)

我相信同学也经常碰到这种问题,就是一些事件持续触发而达不到自己想要的效果。
在这里举个例子

window.onmousemove=function(){
console.log(11111);
}

就一个简单的鼠标移动事件,但是我想要的是移动只是触发一次,但是它一直给我调用,就很烦,所以就需要解决,那么有什么办法呢?
JS函数防抖和节流就是用来处理频繁触发的函数执行问题的常用方法
为什么会有两种方法嘞?那肯定是他们的使用环境有区别咯
首先和大家介绍一下函数防抖

防抖

函数防抖（debounce）：指在一定时间内，如果事件重复触发，则只执行第一次操作或者最后一次操作。即当一个函数频繁触发时，只有等到触发的间隔时间超过了指定的时间，函数才会执行一次，保证只执行一次。

就先来分析一下先执行的防抖

		let obj;
		 content.onmousemove = function (){
		 	let obj = times;
			clearTimeout(times);
		 	times = setTimeout(()=>{
				times = null;
		 	},1000)
		 	if(!obj){
		 	//需要执行的函数
		 	func();
		 	}
		 };
	function func(){
	console.log(111111);
	}

上面的也就是先执行防抖的核心代码了,也就是利用延时器达到改变判断条件而进行的防抖,但是我们现在要考虑的是将把这么一个方法变为公有函数
既然要考虑成为公有函数,就得考虑到this指向,

		function debounce(fn, delay) {
 		 let times;
  		return function() {
  			let obj = times;
    		clearTimeout(timer);
    		times = setTimeout(() => {
 				times = null;
    		}, delay);
    		if(!obj){
		 			fn.apply(this, arguments);
		 		};
  			};
		};
	//使用方法
	document.bady.onmousemove =debounce(执行函数,时间);

使用场景:比如说,转盘点击这种偏用户体验的肯定是先执行好一点
然后就来分析一下后执行的防抖,其实原理都差不多,先看代码

	function debounce(fn, delay) {
  	let time = null;
  	return function() {
    	clearTimeout(time);
   	 time = setTimeout(() => {
     	 fn.apply(this, arguments);
   	 }, delay);
  	}
}
document.bady.onmousemove =debounce(执行函数,时间);

这里也只是执行顺序不同,每次都会先清除之前的定时器，然后再等待一定时间后执行相应操作,只有在给定时间之外才会执行事件需要的动作
使用场景:比如说,ajax请求 数据的获取,避免大量重复的数据流入后台

节流

函数节流（throttle）：指在一定时间内，无论事件触发多少次，只会执行一次操作。即当一个函数频繁触发时，在指定时间内只会执行一次，保证稳定的执行效果。

延时器/:
原理 就是利用time值的来回转换,在每隔一定时间改变一次值

function throttle(fn, delay) {
	let time; 
	return function(){
			if(!time){
				time = setTimeout(()=>{
					time = null; 
					fn.apply(this, arguments);
				},delay)
			}
		}
	}
	document.bady.onmousemove = handleScroll(执行函数,时间)

时间戳:
原理 就是利用每次获取的时间来进行比较,差距达到一定时间才会执行

function throttle(func, wait) {
  let lastTime = 0;  
  return function() {
    const now = new Date().getTime();
    if (now - lastTime > wait) {
      func.apply(this, arguments);
      lastTime = now;
    }
  };
}

每次触发事件时，都会先检查距离上次触发的时间是否大于指定的时间间隔，如果大于，则执行相应操作，并更新上一次触发时间。
应用场景：
输入框连续输入时，只执行最后一次输入的结果，提高性能和响应速度。
**

防抖和节流的区别：

**

1. 实现方式不同：函数防抖是在一定时间内，如果事件重复触发，则只执行最后一次操作。函数节流则是在一定时间内，无论事件触发多少次，只会执行一次操作。

2. 执行时机不同：函数防抖执行时机在事件停止触发后一段时间后，而函数节流则是在指定时间内只会执行一次。

3. 使用场景不同：函数防抖适用于一些需要等待用户停止操作之后再进行执行的场景，如搜索输入框、窗口调整。函数节流适用于一些高频率触发的事件，如鼠标移动事件，滚动事件等。

应用场景：滚动事件、鼠标移动事件等，减少事件触发的次数，提高性能和响应速度。

总结：
函数防抖和节流都可以避免函数频繁重复执行带来的性能问题，但它们适用的场景不同。需要根据具体的业务需求选择使用哪种方式。