云客Drupal源码分析之前端JavaScript（四）防抖与消息处理

本主题接着《前端JavaScript（三）》讲述，推荐按序号阅读

核心库core/ drupal.debounce：

文件： /core/misc/debounce.es6.js

为全局对象Drupal添加了一个方法：

  Drupal.debounce(func, wait, immediate)

该方法称为防抖函数，用于在给定毫秒时间段内最多执行一次给定的函数，参数如下：

func：给定的要执行的函数

wait：时间范围，整数，单位毫秒，在该范围内参数一最多被执行一次

immediate：前文讲到在给定时间段范围内最多执行一次，那么这一次是在这个范围的开始执行还是结束时执行呢？这就是该参数的意义，是一个布尔值，true表示在开始执行，反之在结尾执行，默认为false

返回值是一个匿名函数，包装了传入的函数，称为传入函数的防抖变体

示例如下：

    function f() {
        function fn() {
            console.log(Math.random());
        }
        let yunke = Drupal.debounce(fn, 5000, true);
        yunke();
        yunke();
        yunke();
 }

该示例中，在执行函数f时，里面虽然三次调用yunke();但函数fn仅被执行一次（不管多少次调用，在5秒内仅执行一次）

在频繁重复调用防抖变体时，如果参数immediate被设置为true，那么可以肯定在等待时间内回调一定会被执行一次，且仅一次（在本轮事件循环中执行），如果设置为false，那么只能讲在等待时间内最多被执行一次，可能不被执行，因为是以异步方式执行，每次调用都会推后异步回调的执行时间，示例如下：

    function f() {
        function fn() {
            console.log(Math.random());
        }
        let startTime = new Date();
        let loop = true;
        let yunke = Drupal.debounce(fn, 500, false);
        while (loop) {
            let d = (new Date()) - startTime;
            if (d > 5000) {
                loop = false;
            }
            yunke();
        }
    }

在该列中，执行f()时，回调fn被设置为500毫秒内最多仅执行一次，在while循环中频繁重复调用防抖变体yunke()，循环5秒，执行结果并不是fn被调用了10次，而是5.5秒后被执行一次。

该函数原理上很精炼，用到了闭包、异步编程等；用处有很多，尤其是高频事件触发回调时，比如鼠标移动、窗体大小调整等，能够防止剧烈回调执行，这也是其称为防抖函数的原因。

注意：高频调用Drupal.debounce(fn, 200)();是起不到防抖作用的，仅仅起到延迟执行的效果，因为每次调用返回的都是不同的防抖变体。

 

核心库core/drupal.announce：

该库用于支持辅助技术（通常为残障辅助设备），在理解该库前需要先理解辅助技术相关知识：

有些人群访问web需要借助辅助设备，比如失明和弱视、耳聋和听力丧失、运动受限、言语障碍、光敏性或多种残疾组合的残疾人，以及身体功能退化