防抖实现

138 阅读1分钟
function debounce(fn,delay){
  return function(args){

   var that=this;
   var _args=args;
   clearTimeout(fn.id)
   fn.id=setTimeout(fn.call(that,_args),delay)
  }

}

应用场景:搜索框输入时触发http请求搜索数据,但是连续输入时,会一直发送请求,为了节省网络请求资源

实际要执行的函数

function getHttp(){
  console.log('发送http请求')
}

如何给输入框绑定了getHttp方法,那么在输入时会频繁发送http请求,其实我们只需要在输入停顿之后发送一次请求即可。

debounce(getHttp,1000)('123') 

通过闭包返回了一个function 所以我们实际需要的参数需要通过args传递

**节流就是指连续触发事件但是在 n 秒中只执行一次函数。

防抖就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。**