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

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

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

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

我该如何解决？

Answer 1

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

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

因此，您的代码执行

var t = returnT();

之前

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

因此 returnT() 函数在您调用时不存在。

要么移动 returnT() 使其不“等待”DOM 准备就绪，要么将函数调用设置为等待 DOM 也准备就绪。

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

Why is my page content loading before my header script

javascript

wordpress

deferred