Javascript传递函数并接收错误：UncaughtTypeError，进程不是函数

这段代码运行良好。我的IDE（RubyMine）认为它没有问题。但是ChromeDevTools在源代码和控制台中都会抛出一个错误。有什么办法可以清理一下吗

Uncaught TypeError: process is not a function

$(document).ready(function () {
    let buttonWatch = function (process) {
        $(this).off('click');
        alert(typeof(process)); // This alerts "function"
        process();              // The error is thrown here
        return $(this).on('click', buttonWatch);
    };
    $("#loginButton").on('click', function () {
        function process() {
            alert("Running a process.");
        }
        buttonWatch(process);
    });
});

建议修订的代码显示了相同的问题：

let myProcess;
let process;
$(document).ready(function () {

    let buttonWatch = function (process) {
        $(this).off('click');
        alert(typeof(process));  // alerts "function"
        process();               // Error thrown here
        return $(this).on('click', buttonWatch);
    };

    $("#loginButton").on('click', function () {
        function myProcess() {
            alert("Running a process.");
        }
        buttonWatch(myProcess);
    });

});

---

当您在事件进程本身中动态添加click event on按钮时，会出现错误。因此，您正在尝试取消单击事件，进行一些处理，然后将该事件添加回。但问题是，当您将事件处理程序添加回您的按钮单击时，您并没有在此行传递流程函数

return $(this).on('click', buttonWatch);

所以你需要做一些改变

使您的功能在单击事件范围之外可用

添加时将进程函数作为参数绑定到buttonWatch方法

$（文档）.ready（函数（）{
let buttonWatch=函数（进程）{
$（此）.off（'click'）；
警报（类型（进程））；//此警报“函数”
process（）；//此处抛出错误
返回$（this）.on（'click'，buttonWatch.bind（this，process））；
};
$（“#登录按钮”）。在（'click'，函数（）{
函数过程（）{
警报（“正在运行进程”）；
}
按钮观察（过程）；
});
});
当您在事件进程本身中动态添加单击事件按钮时，会出现错误。因此，您正在尝试取消单击事件，进行一些处理，然后将该事件添加回。但问题是，当您将事件处理程序添加回您的按钮单击时，您并没有在此行传递流程函数

return $(this).on('click', buttonWatch);

所以你需要做一些改变

使您的功能在单击事件范围之外可用
添加时将进程函数作为参数绑定到buttonWatch方法

$（文档）.ready（函数（）{
let buttonWatch=函数（进程）{
$（此）.off（'click'）；
警报（类型（进程））；//此警报“函数”
process（）；//此处抛出错误
返回$（this）.on（'click'，buttonWatch.bind（this，process））；
};
$（“#登录按钮”）。在（'click'，函数（）{
函数过程（）{
警报（“正在运行进程”）；
}
按钮观察（过程）；
});
});
正如我反复指出的，代码运行良好。我只是从DevTools得到了一个奇怪的错误。在任何情况下，都可以通过使用赋值消除错误，DevTools很高兴

$(document).ready(function () {
    let buttonWatch = function (process) {
        $(this).off('click');
        alert(typeof(process)); // This alerts "function"
        let result = process(); // No error is thrown
        return $(this).on('click', buttonWatch);
    };
    $("#loginButton").on('click', function () {
        function process() {
            alert("Running a process.");
        }
        buttonWatch(process);
    });
});

这里的问题是，因为click监听器必须在返回时重新实例化，所以我无法返回过程的结果。因此，我使用disabled编写了一个更好的解决方案，而不是完全关闭侦听器

$(document).ready(function () {

    let buttonWatch = function (button, process) {
        $(button).prop("disabled", true);
        let result = process();
        $(button).prop("disabled", false);
        return result;
    };
    $("#loginButton").on('click', function () {
        function buttonProcess() {
            alert("Running a process.");
        }
        buttonWatch(this, buttonProcess);
    });
});

为了完整起见，在传递参数并要求返回流程结果时，可以使用此设置：

$(document).ready(function () {

    // buttonWatch disables and enables clicks around a process
    let buttonWatch = function (button, process) {
        $(button).prop("disabled", true);
        let result = process();
        $(button).prop("disabled", false);
        return result;
    };
    $("#loginButton").on('click', function () {
        function buttonProcess(message) {
            alert(message);
            return false
        }
        buttonWatch(this, function(){return buttonProcess("Running a process.")});
    });
});

正如我反复声明的，代码运行良好。我只是从DevTools得到了一个奇怪的错误。在任何情况下，都可以通过使用赋值消除错误，DevTools很高兴

$(document).ready(function () {
    let buttonWatch = function (process) {
        $(this).off('click');
        alert(typeof(process)); // This alerts "function"
        let result = process(); // No error is thrown
        return $(this).on('click', buttonWatch);
    };
    $("#loginButton").on('click', function () {
        function process() {
            alert("Running a process.");
        }
        buttonWatch(process);
    });
});

这里的问题是，因为click监听器必须在返回时重新实例化，所以我无法返回过程的结果。因此，我使用disabled编写了一个更好的解决方案，而不是完全关闭侦听器

$(document).ready(function () {

    let buttonWatch = function (button, process) {
        $(button).prop("disabled", true);
        let result = process();
        $(button).prop("disabled", false);
        return result;
    };
    $("#loginButton").on('click', function () {
        function buttonProcess() {
            alert("Running a process.");
        }
        buttonWatch(this, buttonProcess);
    });
});

为了完整起见，在传递参数并要求返回流程结果时，可以使用此设置：

$(document).ready(function () {

    // buttonWatch disables and enables clicks around a process
    let buttonWatch = function (button, process) {
        $(button).prop("disabled", true);
        let result = process();
        $(button).prop("disabled", false);
        return result;
    };
    $("#loginButton").on('click', function () {
        function buttonProcess(message) {
            alert(message);
            return false
        }
        buttonWatch(this, function(){return buttonProcess("Running a process.")});
    });
});

@AndreiGheorghiu它实际上按照编码工作，只有Chrome开发工具抱怨。返回只会重新实例化click侦听器，根本不会重新定义函数。我已经用它玩了一些，并重新修改了我的答案。我希望这能有所帮助。@AndreiGheorghiu我非常感谢你的帮助和建议。它帮助我找到了一个解决方案。@AndreiGheorghiu它实际上是按照编码工作的，只有Chrome开发工具抱怨道。返回只会重新实例化click侦听器，根本不会重新定义函数。我已经用它玩了一些，并重新修改了我的答案。我希望这能有所帮助。@AndreiGheorghiu我非常感谢你的帮助和建议。它帮助我找到了一个解决方案。buttonWatch代码是一个防止双击的通用函数。过程功能特定于每个按钮。因此，该进程函数是在侦听器的范围内创建的。编写的代码没有问题，因为它多次正确运行。唯一的问题是DevTools错误识别。我决定把它作为一项任务。谢谢。很高兴你能解决它。如果流程函数需要是动态的，可以绑定参数函数。更新答案。buttonWatch代码是防止双击的通用函数。过程功能特定于每个按钮。因此，该进程函数是在侦听器的范围内创建的。编写的代码没有问题，因为它多次正确运行。唯一的问题是DevTools错误识别。我决定把它作为一项任务。谢谢。很高兴你能解决它。如果流程函数需要是动态的，可以绑定参数函数。更新答案。在Firefox或Chrome中都不适用于我。如果代码的目的是防止函数在双击时被执行两次，那么您可能应该查看
debounce
。您可能想在问题中开始提示代码的功能，以防有更好的方法来完成您想做的事情。@AndreiGheorghiu我在禁用道具的设置上有错误的编码。已经修改过了。我来看看黛博斯。谢谢。我在Firefox或Chrome上都不工作。如果代码的目的是防止函数在双击时被执行两次，那么您可能应该查看
debounce
。您可能希望在问题中开始提示代码的功能，以防万一会出现bett