jQuery 在第一次加载时工作和不工作答案

【问题标题】：jQuery works and doesn't work when it first loadsjQuery 在第一次加载时工作和不工作
【发布时间】：2016-08-08 03:10:07
【问题描述】：

我有一个 Rails 应用程序，我正在尝试在其中实现一些 jQuery。

我有两个脚本，一个在第一次加载时工作，一个需要重新加载。我在修改 application.js 中的 turbolinks 时遇到了问题。现在同样的问题发生在另一个脚本上。

有效的：

jQuery(document).ready(function($){
//set animation timing
var animationDelay = 5000,
    //loading bar effect
    barAnimationDelay = 3800,
    barWaiting = barAnimationDelay - 3000, //3000 is the duration of the transition on the loading bar - set in the scss/css file
    //letters effect
    lettersDelay = 50,
    //type effect
    typeLettersDelay = 150,
    selectionDuration = 500,
    typeAnimationDelay = selectionDuration + 800,
    //clip effect 
    revealDuration = 600,
    revealAnimationDelay = 1500;

initHeadline();

那个不行的：

jQuery(document).ready(function($){
//if you change this breakpoint in the style.css file (or _layout.scss if you use SASS), don't forget to update this value as well
var MQL = 1170;

//primary navigation slide-in effect
if($(window).width() > MQL) {
    var headerHeight = $('.box-header').height();
    $(window).on('scroll',
    {
        previousTop: 0
    }, 
    ...
    ...

以此类推。

为什么会这样？ CSS 或调用它的页面是否有问题？

【问题讨论】：

你是如何修改application.js中的turbolinks的？
我重新排列了它，所以它是这样的： //= 需要 jquery //= 需要 jquery.turbolinks //= 需要 jquery_ujs //= 需要 turbolinks
如果你通过注释掉它的require来完全禁用turbolinks会发生什么？
它有效！所以 turbolinks 是罪魁祸首？
你使用的是什么版本的 Rails？

标签： javascript jquery ruby-on-rails

【解决方案1】：

Turbolink 可能会导致 Rails 应用出现问题，因为它试图通过维护页面的 <head> 元素中列出的资产（以及其他内容）来节省开销。当您使用完全加载（通过刷新按钮）加载页面时，会发生实际的就绪事件并且您的脚本可以工作。另一方面，如果您以其他方式（通过链接）访问页面，Turbolinks 会尝试重用 <head> 元素，因此不会触发 ready 事件。

过去的解决方案是完全禁用 Turbolinks，方法是在 application.js 中删除其 require 行或通过链接（数据：{no_turbolink: true}）。在 Rails 4.2.x 和 5.x 中，您可以侦听与 Turbolinks 相关的事件，该事件应该在正常的 ready 事件之前可以工作的地方工作。

来自documentation：

但是，由于 Turbolinks 覆盖了正常的页面加载过程， this 所依赖的事件不会被触发。如果你有代码看起来像这样

$(document).ready ->
  alert "page has loaded!"

您必须更改代码才能执行此操作：

$(document).on "turbolinks:load", ->
  alert "page has loaded!"

（为清楚起见，稍微重新排列了引号）

【讨论】：