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

问题描述

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();在我的console.log("testtt");文件中的hdr.js之前被调用。这会导致错误。

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

我该如何解决？

解决方法

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

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

因此，您的代码将执行

var t = returnT();

之前

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

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

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

deferred javascript wordpress