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

Question

我在一个 HTML 页面中有一个出现多次的元素，并且运行相同的 JS。问题是，只有当它是第一个运行它的人时，我才希望它执行特定功能(他的 sibling 从未运行过它 - 至今)。

我需要信号量在它们之间同步。我不知道如何在 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 变量有一个持久引用，因为它是一个 closure over the variable。 ，但没有其他人可以看到它。这是完全私密的。

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

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

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

---

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