为什么我的页面内容在我的标题脚本之前加载

Question

assets/javascript/hdr.js:

jQuery(function($) {
     console.log("testtt");
     function returnT() {
          return true;
     }
});

functions.php:

function hdr_scr() {
    wp_enqueue_script( 'h_scr', get_stylesheet_directory_uri() . 'assets/javascript/hdr.js', array(), false, false );
}

add_action( 'wp_enqueue_scripts', 'hdr_scr' );

https://mypage.com/my-pos (TwentyTwenty Child: pos Template (my-pos.php)):

    ...
    <!-- toward bottom of template -->
    <script>
        debugger;
        var t = returnT();
    </script>
    </div> <!-- end container...... -->

</main><!-- #main -->

上面的脚本/页面是在我的站点中设置的。我遇到的问题是，var t = returnT(); 甚至在我的hdr.js 文件中的console.log("testtt"); 之前被调用。这会导致错误。

根据我的设置，页面应该准备好hdr.js 内容，以便页面调用，但由于某种原因它没有发生。

我该如何解决？

Answer 1

问题是你的代码等待 DOM 被加载，然后执行，因为：

• $(document).ready(function() { ... }) 是 DOM 就绪时执行代码最常用的形式
• $(function() { ... }) 相当于前面的（是简写）
• jQuery(function($) { ... }) 这是同一事物的“安全”版本（$ 在函数内部可用，无论之前设置什么）

所以，你的代码执行

var t = returnT();

之前

jQuery(function($) {
  console.log("testtt");
  function returnT() {
    return true;
  }
});

所以returnT() 函数在您调用它时并不存在。

要么移动returnT()，这样它就不会“等待”DOM 准备好，或者将函数调用也设置为等待DOM 准备好。