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!');
});

我从未在控制台中看到 "ready!"。

Answer 1

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

示例：

<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/

Answer 2

当重要的操作必须始终执行finally-codeblock 的try-catch 时。即使 catch-codeblock 不是运行 through 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>

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

jQuery $(document).ready error blocking footer script

html

javascript

wordpress

jquery