JavaScript 库由于 undefined variable 而失败，但它只发生在页面加载的一半

Question

我有一个 JavaScript 项目来构建一个模态窗口来显示项目任务。在模态窗口中有几个 JS 库，用于诸如弹出窗口、就地编辑、日期选择器、 Markdown 、@mentions、滚动条等，还有更多。

该项目现在一团糟，但它是我的第一个大型 JS 项目，并且进展顺利。

基本上会有任务列表，当点击任务时，它会加载任务数据并将任务的库初始化到模态窗口中。

所有任务在 DOM 中共享相同的模态，因此当模态关闭时，它会破坏启动的库并重置数据。单击的下一个任务记录将重做模态的构建周期。

我最近还添加了通过附加
打开任务模式的功能 #task-modal=1414135033731 到 URL。其中数字将是任务记录数据库 ID 号。

我的问题是，当我加载页面时，大约 50% 的时间一切都加载完美，没有控制台错误，一切都运行良好。

另外 50% 的负载因控制台错误而停止:

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined  
In file jquery-datepicker-foxrunsoftware.js:440

我使用的 Date Picker 日历库文件的第 440 行显示了这段代码......

下面代码中的第 440 行就是这个 var width = tbl.offsetWidth;

  /**
   * Internal method which lays out the calendar widget
   */
  layout = function(el) {
    var options = $(el).data('datepicker');
    var cal = $('#' + options.id);
    if (options.extraHeight === false) {
      var divs = $(el).find('div');
      options.extraHeight = divs.get(0).offsetHeight + divs.get(1).offsetHeight;  // heights from top/bottom borders
      options.extraWidth = divs.get(2).offsetWidth + divs.get(3).offsetWidth;     // widths from left/right borders
    }
    var tbl = cal.find('table:first').get(0);
    var width = tbl.offsetWidth;                 // line 440 
    var height = tbl.offsetHeight;
    cal.css({
      width: width + options.extraWidth + 'px',
      height: height + options.extraHeight + 'px'
    }).find('div.datepickerContainer').css({
      width: width + 'px',
      height: height + 'px'
    });
  },

---

当点击...时，控制台错误显示如下:

---

如前所述，它有一半的时间会发生，而其他时候它可以正常工作而不会显示此错误。

我的应用程序乱七八糟的是要在这里发布许多行代码，但我已经上传了一个演示以在此处展示它的运行情况

演示:已删除

查看演示时，请查看控制台。它可能会全部加载查找，但随后会继续重新加载页面，您最终会收到错误消息。有时我会一遍又一遍地得到错误!

妈妈真的卡住了，我需要帮助才能克服这个问题。

我不想使用新的日期选择器库，但此时如果无法消除此错误，我可能不得不使用。

---

如果可以的话请帮忙，我已经被困了好几个星期了!

即使有尝试的想法也将不胜感激

Answer 1

由于某种原因，您的日期选择器尚未初始化并且您的 '#' + options.id 查找失败，因为它尚不存在。

有一些异步的事情在发生，而你并没有等待它(或者 datepicker 只是一个蹩脚的插件，谢天谢地，我没有过多地处理 jQuery)。