jQuery $(document).ready 错误阻止页脚脚本

Question

所以我遇到了一个独特的问题。

我有一个网站，我根本无法编辑模板，我只能更改嵌入的脚本。

这个嵌入的脚本被注入到相关网站的页脚中。

嵌入脚本依赖$(document).ready 启动。

问题是，页面上方的脚本会在其 $(document).ready 函数中引发错误，这会阻止我的 $(document).ready 被调用。

我尝试设置try .. catch 块，例如this，但我相信这只有在我的脚本仍然位于页面较高位置时才有效。

我的问题，是否可以让我的$(document).ready 调用运行，即使它在页面上较低，并且之前的调用有错误？

在我的脚本上方的站点中：

<script type="text/javascript">
  jQuery(document).ready(function($) {
    $('#logo').vAlign();
  });
</script>

.vAlign(); 未定义，因此它正在抛出：Uncaught TypeError: undefined is not a function

在我的嵌入式 js 中：

jQuery(document).ready(function() {
  console.log('ready!');
});

我从来没有看到“准备好！”在控制台中。

Answer 1

当必须始终执行重要操作时，可以使用 try-catch 的 finally-codeblock。即使 catch-codeblock 没有通过 finally-codeblock is 运行，所以 callReady-function 在最后肯定会被调用，无论是否有错误（除了语法错误）。如下所示：

<script language="JavaScript" src="https://code.jquery.com/jquery-1.11.2.js" type="text/javascript"></script>
<script type="text/javascript">

  try{
    jQuery(document).ready(function($) {
      $('#logo').vAlign();
    });
  }
  catch(e){
    console.log(e);
  }
  finally{
    // some fallback code might be executed here
    callReady();
  }


  jQuery(document).ready(callReady);

  function callReady(){
    console.log('ready!');
  }

</script>

不幸的是，如果没有错误 callReady 被调用了两次（因为 finally 总是在最后运行）但您可以检查这种情况：

<script type="text/javascript">

  var errorHappened = true;

  function checkForErrors(callback){

      callback();

      // when interpreter reaches this point no error with business-code is thrown
      errorHappened = false;

  }

  try{
    jQuery(document).ready(function($) {

      try{

        checkForErrors(function(){

            // put business-code in here

            $('#logo').vAlign();

        })


      }
      finally{
        if(errorHappened){
            callReady();
        }
      }

    });
  }
  catch(e){
    console.log(e);
  }


  jQuery(document).ready(callReady);

  function callReady(){
    console.log('ready!');
  }

</script>

Answer 2

页面中一个脚本标记中的错误不会阻止其他脚本运行。

例子：

<script>
    $(function(){ console.log(1); });
</script>
<script>
    $(function(){ console.log 2; });
</script>
<script>
    $(function(){ console.log(3); });
</script>

这将首先记录第二个脚本标记的语法错误，然后记录值 1 和 3，因为其他准备好的事件正常工作。

演示：http://jsfiddle.net/Guffa/am4f7f18/