Javascript包含以后不在页面中加载

Question

我们有一个Rails应用程序,我们在html头中包含我们的应用程序依赖项application.js:

//= require jquery
//= require analytics
// other stuff...

然后在单个页面上,我们在页面底部有一个脚本标记,用于analytics:

<script>
  analytics.track('on that awesome page');
</script>

这通常很好,但偶尔我们会看到错误analytics is not defined,最近一次是在Chrome 43上.因为所有内容都应该同步加载,这似乎应该是开箱即用,但我将脚本更改为:

<script>
  $(document).ready(function () {
    analytics.track('on that awesome page');
  });
</script>

而现在我们偶尔会看到$ is not defined.我们没有看到来自同一IP的任何其他错误,否则我会怀疑出现了问题application.js.任何其他想法为什么它可能会破裂？您可以在此处查看示例页面.

完整的application.js:

// Polyfills
//= require es5-shim/es5-shim
//= require es5-shim/es5-sham
//= require polyfills
//
// Third party plugins
//= require isMobile/isMobile
//= require jquery
//
//= require jquery.ui.autocomplete
//= require jquery.ui.dialog
//= require jquery.ui.draggable
//= require jquery.ui.droppable
//= require jquery.ui.effect-fade
//= require jquery.ui.effect-slide
//= require jquery.ui.resizable
//= require jquery.ui.tooltip
//
//= require jquery_ujs
//= require underscore
//= require backbone
//= require backbone-sortable-collection
//= require bootstrap
//= require load-image
//= require react
//= require react_ujs
//= require classnames
//= require routie
//= require mathjs
//= require moment
//= require stink-bomb
//= require analytics
//
// Our code
//= require_self
//= require extensions
//= require extend
//= require models
//= require collections
//= require constants
//= require templates
//= require mixins
//= require helpers
//= require singletons
//= require actions
//
//= require object
//= require components
//= require form_filler
//= require campaigns
//= require form_requests
//= require group_wizard
//= require step_adder

Chalk = {};
underscore = _;

_.templateSettings = {
  evaluate:    /\{\{(.+?)\}\}/g,
  interpolate: /\{\{=(.+?)\}\}/g,
  escape:      /\{\{-(.+?)\}\}/g
};

moment.locale('en', {
  calendar: {
    lastDay: '[Yesterday at] LT',
    sameDay: '[Today at] LT',
    nextDay: '[Tomorrow at] LT',
    lastWeek: 'dddd [at] LT',
    nextWeek: '[Next] dddd [at] LT',
    sameElse: 'L LT'
  }
});

更新:

我们偶尔会看到这种情况.我们也在以前加载脚本然后在其中application.js引用它的情况下看到它:

javascript_include_tag 'mathjs'
javascript_include_tag 'application'

我们经常看到一个math is not defined错误.我想知道在加载mathjs或其他脚本期间是否发生错误以防止它被加载,但事实上它发生在很多不同的库上,并且很少发生,这使得它看起来不太可能.我们确实进行了一些调试检查以查看我们是否application.js已完全加载,而且通常似乎不是,即使稍后在页面中访问类似Jquery的东西.

这样做的一个动机是避免关于脚本运行时间过长的旧浏览器通知,但我们可能只是放弃并将其全部拉入application.js以避免错误.

Answer 1

如果您不等待脚本加载该定义,analytics或者您没有定义加载javascript文件的顺序,则会发生这种情况.analytics在尝试调用其方法之前,请确保始终加载定义的脚本track.根据您的设置,脚本可能以随机顺序加载,从而导致这种不可预测的行为.

您尝试确保所有内容都已加载,但是侦听器$(document).ready(function () {});只是确保DOM已准备就绪,而不是分析可用.在这里你有同样的问题.$只是jQuery所以$ is not defined意味着jQuery尚未加载.所以可能你的脚本在jQuery加载之前出现并试图调用尚未定义的内容.

Answer 2

我们仍然每天多次看到此错误，但尚未就导致该错误的原因得出任何结论性答案。我最好的猜测是，要么早期的脚本下载超时，要么用户在链接之间快速导航，导致页面无法完全加载。他们也可能只是使用后退按钮，导致页面上的脚本出现奇怪的行为。