Javascript .show（）不'；不能立即工作-jQuery

我有一个按钮点击功能，如下所示：

   $("#submitButton").click(function (e) {

      e.preventDefault();
       console.log("let's show my div");
      $('#mydiv').show();
      //and then doing a lot of front end operations and some ajax calls
   })

    <div class="main">
        <form id="myform" enctype="multipart/form-data" class="contact-forms">
             <div class="first-line">
                <div class="span3 main-row">
                    <div class="input">
                        <input type="text" id="id" name="id" placeholder="insert your ID"  maxlength="7"  oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"  />

                    </div>

                </div>

            </div>

            <div class="first-line">
                <div class="span8 main-row">
                    <div class="input">
                        <input type="text" id="name" name="name" placeholder="Your name" />
                    </div>

                </div>
             </div>
   <div id="mydiv" style="display:none">

                    <label>
                        Processing, please wait.
                    </label>

        </div>
        </form>
     </div>

当我单击submit按钮时，我立即收到

控制台.log

消息。但是

.show（）

方法在这之后工作了7-8秒。你能告诉我如何使

.show（）

立即工作吗？谢谢

编辑： 我的HTML代码如下所示：

   $("#submitButton").click(function (e) {

      e.preventDefault();
       console.log("let's show my div");
      $('#mydiv').show();
      //and then doing a lot of front end operations and some ajax calls
   })

    <div class="main">
        <form id="myform" enctype="multipart/form-data" class="contact-forms">
             <div class="first-line">
                <div class="span3 main-row">
                    <div class="input">
                        <input type="text" id="id" name="id" placeholder="insert your ID"  maxlength="7"  oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"  />

                    </div>

                </div>

            </div>

            <div class="first-line">
                <div class="span8 main-row">
                    <div class="input">
                        <input type="text" id="name" name="name" placeholder="Your name" />
                    </div>

                </div>
             </div>
   <div id="mydiv" style="display:none">

                    <label>
                        Processing, please wait.
                    </label>

        </div>
        </form>
     </div>

正在处理，请稍候。

这是显示div的示例，您应该使用display none not hidden类隐藏div，如果您使用hidden class，只需删除类即可显示div

函数ShowDiv（）{
$（“#mydiv”）.show（）；
}

你好
告诉我在这7-8秒内发生了什么？是否存在CPU密集型操作？您是否可以提供HTML代码或创建？@CertainPerformance主要用于验证来自用户和4-5个AJAX调用的数据。鉴于您所说的，您所显示的代码应该毫不延迟地工作。因为您有延迟，所以问题与您没有显示的代码有关。为了解决这个问题，我们需要看一个工作示例。问题中发布的JS+HTML不会导致您描述的问题。我们确实需要一个请检查此链接，您确定主体元素末尾的javascript代码：@MortezaFathnia您是什么意思？！脚本标记放置在正文标记的结尾之前@莫特扎法尼亚这里不重要！问题不在于脚本的位置。此外，当您在此处使用代码段并使用jquery时，它会自动插入到您的代码中。是否测试链接？我不明白你的意思？！