防抖函数的应用场景及实现方式（超全）

防抖函数的应用场景:

1、高频触发的事件监听回调:比如onscroll, onresize, oninput, touchmove等；
2、用户名,手机号,邮箱输入验证时的输入框搜索自动补全事件，搜索框搜索输入,只需用户最后一次输入完,再发送请求；
3、频繁操作点赞和取消点赞；
4、浏览器窗口大小改变后,只需窗口调整完成后,再执行resize事件中的代码,防止重复渲染；

实现原理：

如果在500ms内频繁操作，则每次都会清除一次定时器然后重新创建一个。直到最后一次操作，然后等待500ms后发送ajax。

实现方式:

1、防抖函数主要利用了闭包、高阶函数、定时器等特性
2、首先我们可以定义一个高阶函数debounce,接受一个回调函数和延迟时间,在函数内部定义一个定时器变量,用于记录当前的定时器
3、debounce内部我们返回一个函数,函数执行的时候会检查当前是否有定时器,有的话会清除当前的定时器,重新赋值一个新的定时器给定时器变量,并设置定时器执行时间为用户传入的第二个参数
4、定时器内部通过apply调用用户传入的函数,并传入执行上下文和arguments
5、这样就能保证在规定时间内,不会高频的触发回调函数

代码实现：

 function ajax(content) {
    
    
   console.log('ajax request ' + content)
  ｝
  
  function debounce(fun, delay) {
    
    
   return function (args) {
    
    
   let that = this
   let _args = args
   clearTimeout(fun.id)
   fun.id = setTimeout(function () {
    
    
   fun.call(that, _args)
   ｝, delay)
   ｝
  ｝
   
  let inputb = document.getElementById('debounce')
  
  let debounceAjax = debounce(ajax, 500)
  
  inputb.addEventListener('keyup', function (e) {
    
    
   debounceAjax(e.target.value)
  ｝)