javascript - 将 javascript (codepen) 添加到我的 Rails 应用程序时未定义函数

Question

我正在尝试将此代码添加到我的 Rails 5 应用程序中:https://codepen.io/marklocklear/pen/jjGLRx

我在 app/assets/javascripts 中创建了一个名为 stopwatch.js 的文件，并将 JS 代码封装在:

$(document).ready(function() {
  ...JS code from codepen
});

当我单击 Rails 应用程序中的“开始”按钮时，我收到控制台消息:

edit:63 Uncaught ReferenceError: startWatch is not defined
    at HTMLButtonElement.onclick (edit:63)

此外，在 application.js 中我有:

//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

我错过了什么？

Answer 1

从 HTML 属性执行的代码在全局范围内执行。如果你把代码放在里面

$(document).ready(function() {
  ...JS code from codepen
});

然后函数在该函数的作用域中声明，而不是全局作用域。

无需将函数定义放入$(document).ready内。您只需放置在 DOM 加载之前不应运行的代码。函数在被调用之前不会运行，并且在用户单击元素之前不会发生，这显然在 DOM 加载和显示之前不会发生。

但是，您的函数引用在 $(document).ready 函数中声明的变量，因此如果将函数移到外部，您将遇到另一个范围界定问题。因此，解决方案是将函数定义保留在内部，但让它们创建全局函数名称。改变

function stopWatch() {
  ...
}

至

window.stopWatch = function() {
  ...
};

另一个解决方案是去掉 HTML 中的 onclick 属性，并使用 jQuery 事件绑定(bind)。

$("#start").click(startWatch);
$("#reset").click(resetWatch);