javascript - 从 ruby​​ on rails 视图调用 javascript 函数

Question

我一直在寻找，但找不到任何对我有帮助的东西。

我有一个文件 countdown.js app/assets/javascript/countdown.js

// Total seconds to wait
var seconds = 11;

function countdown() {
    seconds = seconds - 1;
    if (seconds < 0) {
        // Chnage your redirection link here
        seconds = 11;
        window.setTimeout("countdown()", 1000);
    } else {
        // Update remaining seconds
        document.getElementById("countdown").innerHTML = seconds;
        // Count down using javascript
        window.setTimeout("countdown()", 1000);
    }
}

// Run countdown function
countdown();

我想在我的 index.html.erb 文件上调用这个函数。我该怎么办？

标签： javascriptruby-on-rails

Answer 1

你的js函数不好：

• 首先，您尝试调用countdown内部本身
• 然后，对于倒计时，您应该使用setInterval而不是setTimeout（“定义和用法”部分中的来源）

所以你可以做更多这样的事情：

//assets/javascript/countdown.js

function countdown() {
  var seconds = 11
  setInterval(function() {
    if (seconds < 1) {
      seconds = 11
    }
    seconds -= 1
    document.getElementById("countdown").innerHTML = seconds + " seconds"
  }, 1000);
}

window.onload = function() {
  countdown();
};

确保您的资产/javascript/application.js 中需要您的 js 文件：

//= require countdown
// OR
//= require_tree .

并且您的 application.js 链接在您的布局中：

#layouts/application.html.erb
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

现在您可以在 index.html.erb 的 div 中显示倒计时id="countdown"