Javascript 代码在控制台中工作，但加载时实际的用户脚本函数未定义

Question

请记住，我不懂 JavaScript。我通过几个小时的阅读和到处提出的问题将这些内容放在一起。我不是程序员，只了解一点 HTML 和 CSS。

我正在尝试创建一个用户脚本，该脚本每隔一定时间单击页面上的指定按钮，直到满足特定条件，然后停止循环并按另一个按钮。感谢这里的一些帮助，我得到了一段代码，当粘贴到 Chrome 或 Firebug 控制台时，它完全按照我想要的方式执行。

但是，如果我将此脚本安装为 Chrome 扩展程序或 Greasemonkey 脚本，则会收到未定义的错误。

var int = self.setInterval ("refresh ()", 4000);

function stop () { 
    // Stop the loop before joining server
    int = window.clearInterval (int)
}

function join () { 
    // Click Join Server button
    document.getElementsByClassName (
        "base-button-arrow-almost-gigantic"
    )[0].click ();
}

function refresh () { 
    // If current players < max, cancel loop and join server
    var playersElement = document.getElementById ('server-info-players');
    var players = playersElement.textContent;
    var parts = players.split ("/");

    var current = parseFloat (parts[0]);
    var max = parseFloat (parts[1]);

    if (current < max) {
        stop ()
        join ()
    }

    var refreshBtn = document.querySelector (
        "div.serverguide-header-refresh-button div[type='reset'] a"
    );
    var clickEvent = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    refreshBtn.dispatchEvent (clickEvent);
}

如果将其直接粘贴到控制台中，它将按预期工作，点击刷新按钮直到满足条件，然后按加入按钮。作为用户脚本安装时，我从 Chrome 和 Firebug 中收到以下错误：

Uncaught ReferenceError: refresh is not defined
(anonymous function)

这只是以四秒的间隔返回。

关于用户脚本有什么我不知道的吗？我做错了什么？

Answer 1

注意：

1. 如果代码经过缩进和格式化以便于阅读，人们更有可能阅读您的代码。 ;-)  请参阅我对您的问题所做的编辑，并且有很多有助于格式化的工具。

2. 回复：setInterval("refresh()"...; 不要使用这样的引用代码调用 setInterval （和类似的函数）。它总是很糟糕的形式（不必要地使用eval()）并且它完全由于沙箱的原因，在 Greasemonkey 中不起作用。

3. 同样，有时在定义之前使用的 JS 将是“未定义”——尤其是在 eval 情况下。

4. 不要使用不明确的、常见的或保留字作为变量或函数名称。 int 尤其糟糕，因为大多数人会将其读作“整数”，并且它是几乎所有主流语言中的保留词。

5. 要小心 self 和 window 对象。它们在 Greasemonkey 上下文中具有不同的含义/行为。

6. 分号在 javascript 中并不总是必需的，确实如此，但要养成始终使用它们的习惯。它会为你减轻将来的痛苦，并使代码更容易理解。

无论如何，如果代码可以在控制台中运行，那么这也应该可以在脚本中运行：

var refreshInterval;

function stopRefreshTimer () { 
    // Stop the loop before joining server
    clearInterval (refreshInterval);
}

function joinServer () { 
    // Click Join Server button
    document.getElementsByClassName (
        "base-button-arrow-almost-gigantic"
    )[0].click ();
}

function refreshUntilJoiningServer () { 
    // If current players < max, cancel loop and join server
    var playersElement  = document.getElementById ('server-info-players');
    var players         = playersElement.textContent;
    var parts           = players.split ("/");

    var current         = parseFloat (parts[0]);
    var max             = parseFloat (parts[1]);

    if (current < max) {
        stopRefreshTimer ();
        joinServer ();
    }

    var refreshBtn      = document.querySelector (
        "div.serverguide-header-refresh-button div[type='reset'] a"
    );
    var clickEvent      = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    refreshBtn.dispatchEvent (clickEvent);
}

refreshInterval         = setInterval (refreshUntilJoiningServer, 4000);

Answer 2

简而言之，无论是 setInterval 还是事件处理程序，该调用都是在 Greasemonkey 沙箱消失后发生的。

页面加载 -> Greasemonkey 启动，运行脚本，然后 Greasemonkey 消失。 （4 秒过去）你的脚本现在开始执行。

您需要做的是将范围与 setInterval 一起传递，因此当这 4 秒过去时它仍然存在。您可以使用匿名函数轻松完成此操作。 （同时，避免您当前正在执行的隐含 eval()...）

粗略地说，您的代码最终应该如下所示：

var notInt = self.setInterval(function () {

    function stopRefreshTimer() {
        // Stop the loop before joining server
        clearInterval(refreshInterval);
    }

    function joinServer() {
        // Click Join Server button
        document.getElementsByClassName("base-button-arrow-almost-gigantic")[0].click();
    }

    // If current players < max, cancel loop and join server
    var playersElement = document.getElementById('server-info-players');
    var players = playersElement.textContent;
    var parts = players.split("/");

    var current = parseFloat(parts[0]);
    var max = parseFloat(parts[1]);

    if (current < max) {
        stopRefreshTimer();
        joinServer();
    }

    var refreshBtn = document.querySelector("div.serverguide-header-refresh-button div[type='reset'] a");
    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initEvent('click', true, true);
    refreshBtn.dispatchEvent(clickEvent);
}, 4000);