• 面试题整理:防抖函数的应用场景和实现方式?


    防抖函数的应用场景:

    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)
        })

  • 相关阅读:
    Python爬虫是否合法?
    【软考中级信安】第三章--密码学基本理论
    NoSQL之 Redis配置与优化
    Spring中的依赖注入、setter与构造器注入、自动装配与集合注入详细描述及使用(XML版中篇)
    OpenGL编程(一):三角形大作
    Shiro框架-史上详解
    uniapp 原生sqlite本地数据库管理 Ba-Sqlite
    172.mybatisPlus的实际应用
    2022/11/28-29总结
    数据结构篇_编程思想板块_第一章顺序表和链表
  • 原文地址:https://blog.csdn.net/qq_42417923/article/details/126519297