• 高阶函数 debounce 和 throttle


    /**
    * 空闲控制 返回函数连续调用时,空闲时间必须大于或等于 idle,action 才会执行
    * @param idle   {number}    空闲时间,单位毫秒
    * @param action {function}  请求关联函数,实际应用需要调用的函数
    * @param tail?  {bool}      是否在尾部执行
    * @return {function}	返回客户调用函数
    */
    debounce(idle,action,tail?)
    

      

    /**
    * 频率控制 返回函数连续调用时,action 执行频率限定为 次 / delay
    * @param delay  {number}    延迟时间,单位毫秒
    * @param action {function}  请求关联函数,实际应用需要调用的函数
    * @param tail?  {bool}      是否在尾部用定时器补齐调用
    * @return {function}	返回客户调用函数
    */
    throttle(delay,action,tail?)
    

      

    使用样例:

    // ajaxQuery 将在停止输入 250 毫秒后执行
    $('#autocomplete').addEventListener('keyup',debounce(250,function() {
        ajaxQuery(this.value,renderUI);
    },true))
    // 当窗口大小改变时,以 50 毫秒一次的频率为单位执行定位函数 position
    window.addEventListener('resize',throttle(50,position,true) );
    

      更多:

    只要牵涉到连续事件或频率控制相关的应用都可以考虑到这两个函数,比如:

    • 游戏射击,keydown 事件
    • 文本输入、自动完成,keyup 事件
    • 鼠标移动,mousemove 事件
    • DOM 元素动态定位,window对象的resize和scroll 事件

    前两者 debounce 和 throttle 都可以按需使用;后两者肯定是用 throttle 了。

  • 相关阅读:
    JavaScript的作用域
    background的水平条纹和斜向条纹
    CSS currentColor 变量的使用
    pop()和attr()的用法和区别
    指向构造函数的属性值
    OKHTTP缓存max-age和max-stale详解
    js数据类型
    css两列布局之基于BFC规则实现
    vue中央事件总线eventBus的简单理解和使用
    git push 时提示用户名或密码相关错误信息
  • 原文地址:https://www.cnblogs.com/daji/p/9519435.html
Copyright © 2020-2023  润新知