js防抖和节流_js 输入框防抖

在javascript中,防抖是指触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间;节流是指当持续触发事件时,保证一定时间段内只调用一次事件处理函数.

在JavaScript中，节流（throttling）和防抖（debouncing）是两种常用的性能优化技术，用于控制函数的执行频率。它们适用于不同的场景 

一、防抖

(1)主要应用场景是在用户频繁触发某个事件时,例如窗口大小调整、搜索框输入等

(2) input输入框的案例:

let input = document.querySelector('input')
let time = null //用来控制事件的触发
 
input.on('click',function(){
   if(time !== null){
      clearInterval(time)
   }
   time = setTimeout(()=>{
      //箭头函数没有this 这里的this指向input
      console.log(this.value)
   },500)
})

用time来控制事件的触发判断time是否为空,如果为空的话就打印this.value, 否则就清掉time,用500ms来控制事件的触发 

下面这个使用闭包来封装一个防抖的函数

let input = document.querySelector('input')
input.on('click',debounce(function(){
    console.log(this.value)
},500))
 
function debounce(fn,delay){
  let time = null;
  return function(){
    if(time !==null){
       clearTimeout(time)
    }
    time = setTimeout(()=>{
       fn.call(this) //修改this指向 将this指向fn(也就是input)
    },delay)
  }
}

二、节流

(1)主要应用场景是在某个事件持续触发时,例如页面滚动、鼠标移动等.

(2)窗口滚动的案例:

window.addEventListener('scroll',throttle(function(){
    console.log('处理滚动事件')
},200))
 
throttle(func,delay){
    let timeoutId
    return function(){
       if(!timeoutId){
          timeoutId = setTImeout(()=>{
             func.apply(this,argumments);
             timeoutId = null;
          },delay);
       }
    }
 
}
 

throttle函数接受一个函数和一个延迟时间作为参数,它返回一个新的函数,该函数在指定的延迟时间内只能执行一次,但是在200毫秒内的连续滚动事件将被忽略.这样可以有效地减少函数地执行次数.

总结:防抖适用于用户频繁触发事件的场景,而节流适用于事件持续触发的场景.具体使用哪种技术取决于你的需求和场景.