Javascript 脚本第一次不起作用，但之后就可以了

Question

我正在尝试为我的网站创建一个评论系统。脚本用于在提交评论时显示消息(或警报)。我没有足够的 js 知识来自己调试和解决这个问题，所以我想我会在这里问，直到我了解更多关于 js 的知识。

我的脚本导入位于标题中:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" async></script>
<script type="text/javascript" src="/js/main.js" async></script>

还有我的 main.js 脚本:

// Static comments
jQuery(document).ready(function ($) {
  var $comments = $('.js-comments');

  $('#comment-form').submit(function () {
    var form = this;

    $(form).addClass('submitting');
    $('#comment-form-submit').html('Loading ...');

    $.ajax({
      type: $(this).attr('method'),
      url: $(this).attr('action'),
      data: $(this).serialize(),
      contentType: 'application/x-www-form-urlencoded',
      success: function (data) {
        $('#comment-form-submit').html('Submitted');
        $('.new-comment-form .js-notice').removeClass('notice--danger').addClass('notice--success');
        showAlert('<p style="color:#47bd40">Thanks for your comment! It will show on the site once it has been approved.</p>');
      },
      error: function (err) {
        console.log(err);
        $('#comment-form-submit').html('Submit Comment');
        $('.new-comment-form .js-notice').removeClass('notice--success').addClass('notice--danger');
        showAlert('<p style="color:#e64848">Submission failed, please fill in all the required inputs.</p>');
        $(form).removeClass('submitting');
      }
    });

    return false;

  });

  function showAlert(message) {
    $('.new-comment-form .js-notice').removeClass('hidden');
    $('.new-comment-form .js-notice-text').html(message);
  }
});

我的问题是，如果我提交评论，脚本将不起作用，但如果我等待一段时间并再次提交，它就可以正常工作。

我猜测这与加载脚本并运行它们有关，我在这里看到了一些类似的问题，但没有一个答案解决了我的问题。

Answer 1

脚本标记上的异步意味着“异步”。

通常，当您加载网页时，浏览器将请求(如果尚未在其更新的缓存中)主 html 中指定的所有文件和导入。启动时加载的内容之一是所有脚本标记。

但是你那里有异步。

所以你的代码没有运行，因为它还不存在!

删除异步，它应该可以正常运行。