如何在异步加载的 HTML 元素之间创建信号量

Question

我在 HTML 页面中有一个出现多次的元素，并且运行相同的 JS。 问题是，我希望它只有在第一个运行它时才执行特定功能（他的兄弟姐妹从未运行过它）。

我需要信号量在它们之间同步。 我无法知道如何在 JS 中声明变量并以这种方式执行信号量。

Answer 1

有很多方法。

您需要在某处放置一个标志。如果没有其他任何内容，您可以将其放在 window 上，但使用不太可能与其他任何内容冲突的名称。

那么 JavaScript 就非常简单了：

if (!window.myUniqueNameFlag) {
    window.myUniqueNameFlag = true;
    // Do your processing
}

但是，如果可以避免的话，将东西放在 window 上并不是理想的选择，尽管这是非常常见的做法。 （您在全局范围内使用 var 声明的任何变量都是 window 的属性，您在全局范围内声明的任何函数也是如此。）

如果您的函数已在全局范围内声明范围（因此已经占用了全局标识符/窗口属性），您可以这样做以避免创建第二个标识符。而不是：这样

function foo() {
    // ...your processing...
}

做：

var foo = (function() {
    var flag = false;

    function foo() {
        if (!flag) {
            flag = true;
            // ...your processing...
        }
    }

    return foo;
})();

这看起来很复杂，但事实并非如此：它定义并立即调用一个匿名函数，在该函数中定义一个变量和一个嵌套函数，然后返回嵌套函数的引用并将其分配给 foo 变量。您可以调用 foo 并且您将获得嵌套函数。嵌套函数对 flag 变量有一个持久引用，因为它是一个 关闭变量，但其他人看不到它。这是完全私人的。

第三个选项是仅在函数对象本身上使用标志：

function foo() {
    if (!foo.flag) {
        foo.flag = true;
        // ...do your processing...
    }
 }

函数只是具有被调用能力的对象，因此您可以向它们添加属性。

---

1 使用 let 或 const 在全局范围内声明的变量是全局变量，但不会成为 window 的属性。