JS函数防抖与节流-极简版

函数防抖与函数节流在项目中会经常用到，特别是在对一些事件频繁操作的时候。

1、函数防抖

• 作用：减少代码执行次数，提升网页性能

当频繁操作一个事件结束后, 过n秒后开始执行任务。当在n秒钟内再次执行时，则重新计算时间。
一句话：让被调用的函数在一次连续的高频操作过程中只被调用一次。

举个栗子：

输入框搜索数据时

• 不防抖的情况下

let inputs = document.querySelector('input') //获取到input输入框
//定义一个键盘抬起事件
inputs.addEventListener('keyup', function () {
     
	console.log(inputs.value);
})

显示效果

• 设置防抖后
• 当停止输入后，过500毫秒后再打印数据，如果500毫秒时间内又再次进行了输入，则重新计算时间，从头再来

//同理  获取输入框
let inputs = document.querySelector('input')

//执行键盘事件
inputs.addEventListener('keyup', debounce)  // 为了方便看，将debounce单独写到一个函数里面

//定义防抖函数
let timer = null; //设置定时器
function debounce() {
        
	timer && clearInterval(timer) 
	timer = setTimeout(() => {
     
		console.log(inputs.value);
	}, 500)
}

显示效果

防抖函数封装

function debounce(fn, delay = 500) {
     
   let timer = null;
   return function () {
     
      let _this = this;
      let _arguments = arguments;
      timer && clearInterval(timer)        
      timer = setTimeout(() => {
     
          fn.apply(_this, _arguments)
          timer = null
      }, delay)
   }
}

//使用
inputs.addEventListener('keyup', debounce(function(){
     
  console.log(inouts.value);
}),600)

2、函数节流

• 作用：减少代码执行的次数，提升页面性能

当频繁操作事件时，间隔n秒执行一次
.
例如：原本你在1秒内，点击10次，执行了10次。但设置节流后，指定500毫秒的间隔时间，那么就只会执行2次

举个例子：

监听页面滚动

• 不节流的情况下

window.addEventListener('scroll', function () {
     
	console.log("正在滚动！");
})

显示效果

• 设置节流后

window.addEventListener('scroll', throttle)

let timer = null;
let flag = true;

function throttle() {
     
	if (!flag) {
     
		return
	}
	flag = false
	timer && clearTimeout(timer);
	timer = setTimeout(() => {
     
		flag = true;
		console.log("正在滚动！");
	}, 1000)
}

显示效果

节流函数封装

 const input1 = document.querySelector('input')  
   
   function throttle(fn, delay = 500) {
     
      let timer = null
      let flag = true;
      return function () {
     
        if (!flag) return
        flag = false;        
        let _this = this;
        let _arguments = arguments;
        timer && clearTimeout(timer);
        timer = setTimeout(() => {
     
          flag = true;
          fn.apply(this, arguments) 
        }, delay)
      }
    }
//使用
inputs.addEventListener('keyup', throttle(function () {
     
        console.log(inputs.value)
}),500)

3、函数防抖和函数节流的区别

函数防抖：

• 让连续的高频操作 只执行一次

函数节流：

• 减少连续的高频操作函数执行次数