面试题整理：防抖函数的应用场景和实现方式？

防抖函数的应用场景：

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=argsclearTimeout(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)
    })