Javascript传递函数并收到错误：未捕获的TypeError，进程不是函数
[英]Javascript passes function and receives error: Uncaught TypeError, process is not a function
问题描述
This code runs fine. 
这段代码运行正常。 My IDE (RubyMine) sees no problem with it. 我的IDE（RubyMine）认为没问题。 But Chrome DevTools throws an error both in the Source and in the Console. 但Chrome DevTools在源和控制台中都会抛出错误。 Is there some way to clean this up? 有没有办法清理它？
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);
});
});
Revised code as recommended shows same issues: 推荐的修订代码显示了相同的问题：
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);
});
});
2 个解决方案
解决方案1
0 2017-05-02 23:32:52
You are getting error when you add on click event on button dynamically within event process itself. 在事件进程本身内动态地在按钮上添加单击事件时，您会收到错误。 So you are trying to take off click event, do some processing and then add the event back. 所以你试图取消点击事件，做一些处理然后再添加事件。 But problem is when you add event handler back to your button click, you are not passing the process function on this line. 但问题是当您将事件处理程序添加回按钮单击时，您没有在此行上传递过程函数。
return $(this).on('click', buttonWatch);
So you need to make couple of changes. 所以你需要做一些改变。
- Make your function available outside of click event scope 在click事件范围之外使您的功能可用
- Bind process function as parameter to buttonWatch method when you add on 在添加时将过程函数绑定到buttonWatch方法的参数
$(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.bind(this,process)); }; $("#loginButton").on('click', function () { function process () { alert("Running a process."); } buttonWatch(process); }); });
<html> <head> <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> </html>
Reference : bind function 参考： 绑定功能
解决方案2
0 已采纳 2017-05-03 00:22:00
As I repeatedly stated, the code runs fine. 正如我一再声明的那样，代码运行良好。 I only get the weird error from DevTools. 我只从DevTools那里得到了奇怪的错误。 In any case, the error is eliminated by using an assignment and DevTools is happy. 在任何情况下，使用赋值消除错误，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);
});
});
The issue here is that, because the click listener must be reinstantiated upon return, I cannot return the result of the process. 这里的问题是，因为在返回时必须重新实例化click侦听器，所以我无法返回该进程的结果。 So, I coded a better solution using disabled instead of offing the listener at all. 因此，我编写了一个更好的解决方案，使用禁用而不是关闭监听器。
$(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);
});
});
Just for completeness, this set up can be used when passing parameters and requiring that return of the process's results: 为了完整起见，可以在传递参数并要求返回过程结果时使用此设置：
$(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.")});
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.