前端性能优化之防抖和节流

1.函数防抖

函数防抖，抖即触发，函数防抖就是在规定的时间内执行最后一次，如果在规定的时间里面再次触发，那么则会重新计算时间，比如一个时间规定在1秒之后触发，在这一秒里面我触发了，那么会推迟时间触发时间，定时器清除并且再次计算，直到下一个一秒，即函数执行一次后，在n秒之内不执行，否则推迟函数执行，下一次函数调用将清除上一次的定时器

代码示例

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

function debounce(function,delay)
{	
	let timeout;//定时器，用于接收setTimeout返回的唯一标识ID
	return funtion()
	{
		timeout && cleanTimeout(timeout);
		//如果时间存在，就清空定时器
		timeout = setTimeout(()=>{
			function.call(this);//改变this指向
			function();
		}，delay)
	}
	
}

这样，一个防抖函数就封装好了，大家可能不明白timeout的作用，为什么他就一定要清空，清空的话是结束上一次操作，即在规定的时间里面，再次触发相关时间，那么上一次的执行将提前结束，并且进入新的等待时间，直到时间线到达，就比如一个事件规定一秒之后再执行，那么在这一秒里面，计算器已经开始计算，如果再次触发函数，那么就是会再次清空已经存放的时间数，重新计时，除非下一次等待时间达到要求，达到等待时间之后，会触发相关操作，程序结束，等待下一次执行；

1.函数节流

当时间持续触发的时候，保证在一定时间里面只触发一次时间处理函数，并不是最后一次触发,防抖才是只执行最后一次

上代码

function fn(...args)
{
  let flag =true;
  console.log(flag);
  if(flag)
  {
    setTimeout(()=>{
      console.log("object");
      flag =true;
      console.log(flag);
    },500)
    //只有在500毫秒之后标记位才会变成true，
  }
  flag = false;//执行之后就变成了false，需要定时器里面的内容再次执行需要标记位的改变，标记位的改变才可以触发相关的业务逻辑
    console.log(flag);
}
fn();

这里可以看到我们有一个标记位，刚开始为true，然后在延迟之后执行先关操作，随后标记位改变，但是我们要注意的是在判断条件外面也有一个标记位的改变，这个标记位的改变是早于定时器里面的标记位的改变的，因为是异步函数的执行，所以会变成false，就执行不了相关的业务逻辑，直到0.5秒之后，标记位改变才能执行相关的业务逻辑，即在0.5秒里面只能执行一次；