Javascript setTimeout不使用onclick

我有以下资料：

onclick="setTimeout(overlayDisplayButton, 3000)" 

它似乎不起作用，我正在开始学习javascript/jquery，所以我的工作方式很可能有问题

我最初尝试使用callback，以便在检索结果时覆盖将消失，但我不完全理解它是如何工作的，因此在此期间，我认为显示结果会有延迟

以下是我正在使用的脚本：

<script>
 $(document).ready(function(){

   $('#zip').on("input",function(){
       $('#city option[value=""]').prop('selected',true);

   })

    $('#city').on("change",function(){
       $('#zip').val("");
    })
})

function displayOverlay(text) {
    $("<table id='overlay'><tbody><tr><td>" + text + "</td></tr></tbody></table>").css({
        "position": "fixed",
        "top": "0px",
        "left": "0px",
        "width": "100%",
        "height": "100%",
        "background-color": "rgba(0,0,0,.6)",
        "z-index": "10000",
        "vertical-align": "middle",
        "text-align": "center",
        "color": "#fff",
        "font-size": "40px",
        "font-weight": "bold",
        "cursor": "wait",
        "overflow-y":"hidden"
    }).appendTo("body");
}

function removeOverlay() {
    $("#overlay").remove();
}

$(function overlayDisplayButton() {
    $(".btn").click(function () {
        if ($("#overlay").length > 0) {
            removeOverlay();
        } else {
            displayOverlay("Loading...");
        }
    });
});
</script>

$（文档）.ready（函数（）{
$（'#zip'）。在（“输入”，函数（）上）{
$（“#城市选项[value=”“]）.prop（'selected'，true）；
})
$（'#city'）。关于（“更改”，函数（）{
$（'#zip'）.val（“”）；
})
})
函数displayOverlay（文本）{
$（“+text+”）.css({
“位置”：“固定”，
“顶部”：“0px”，
“左”：“0px”，
“宽度”：“100%”，
“高度”：“100%”，
“背景色”：“rgba（0,0,0,6）”，
“z指数”：“10000”，
“垂直对齐”：“中间”，
“文本对齐”：“居中”，
“颜色”：“fff”，
“字体大小”：“40px”，
“字体大小”：“粗体”，
“游标”：“等待”，
“溢出-y”：“隐藏”
}).附于（“主体”）；
}
函数removeOverlay（）{
$（“#覆盖”）.remove（）；
}
$（函数覆盖显示按钮（）{
$（“.btn”）。单击（函数（）{
如果（$（“#叠加”）.length>0）{
移除覆盖层（）；
}否则{
显示覆盖（“加载…”）；
}
});
});

下面是我使用的调用setTimeout的表单：

    <div class="panel panel-default">
    <div class="panel-body">
<!---   <div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div><!--Progress bar--->
        <form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate="" role="form">
            <div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div>

            <div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div>

            <div class="form-group"><select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty"><option disabled="disabled" selected="selected" value="">Specialty</option>
            <option value=""></option><option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option> </select></div>

            <div class="form-group">
             <SELECT name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City">
                       <option disabled="disabled" selected="selected" value="">City</option> 
                          <option value=""></option>
                          <cfoutput query="cityFind">
                           <option value=#city#>#city#</option>
                        </cfoutput> 
                      </select>

            <!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities">{{c.City}}</option> </select>---->
            </div>

            <div class="row">
                <div class="col-xs-6 no-right-padding paddingLanguage">
                    <div class="form-group widthLanguage">


                    <select name="language" class="form-control" ng-model="searchParam.Language">
                        <option disabled="disabled" selected="selected" value="">Language</option>
                        <option value=""></option>
                     <cfoutput query="Languages">
                          <option value=#Language#>#Language#</option>
                        </cfoutput> 
                      </select>



                      <!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language">
                        <option disabled="disabled" selected="selected" value="">Language</option>
                        <option ng-repeat="l in Languages">{{l.Lang}}</option>
                      </select>--->
                    </div>
                </div>

                <div class="col-xs-6 no-left-padding">
                    <div class="form-group"><select class="form-control" name="gender" ng-model="searchParam.Gender">
                    <option disabled="disabled" selected="selected" value="">Gender</option>
                    <option value=""></option>
                    <option>Male</option><option>Female</option> </select></div>
                </div>
            </div>

            <hr class="hrDoctor" />
            <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>

            <div class="row">
                <div class="col-xs-7 no-right-padding">
                    <div class="form-group">
                        <div class="input-group"><select class="form-control" name="distance" ng-model="searchParam.distance"><option selected="selected">5</option><option selected="selected">10</option><option selected="selected">15</option><option selected="selected">20</option> </select>

                            <div class="input-group-addon">mi</div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-5 no-left-padding widthZip">
                    <div class="form-group"><input allow-pattern="[\d\-]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" data-default=""/></div>
                </div>
            </div>

            <div class="form-group"><input class="btn btn-warning btn-block ignore" ng-click="gotoElement('SearchResultsAnchor');" onclick="setTimeout(overlayDisplayButton(), 3000)" type="submit" value="Search" /></div>
            <!---<div class="form-group buttonWidth resetButton"><input class="btn btn-primary btn-block" type="reset" value="Reset"  onClick="window.location.reload()"/></div>--->
        </form>
    <!---</div><!---Progress bar--->--->
    </div>
</div>

专业
家庭实践全科医学内部医学儿科
城市
#城市#
语言
#语言#
性别
男性女性

*或按邮政编码半径搜索*
5101520
惯性矩
--->

所以我想如果我做onclick并将其设置为等于setTimeout（…），它将持续3秒，然后让用户看到结果

---

然而，事实并非如此，也没有发现问题所在。

您当前的HTML与您复制的内容不完全相同：

<... onclick="setTimeout(overlayDisplayButton(), 3000)" ...>

---

除此之外，@Mike C指出的是正确的：

OverlyDisplayButton

只是向按钮添加了一个事件处理程序。也许你想做的是：

function overlayDisplayButton() {
    if ($("#overlay").length > 0) {
        removeOverlay();
    } else {
        displayOverlay("Loading...");
    }
}

---

OverlyDisplayButton

将单击处理程序添加到页面中的每个

.btn

。它不会运行单击处理程序代码。每次你调用

OverlyDisplayButton

你都在说“好的，每当我点击一个按钮，我都希望发生这种情况”，而它们只是堆积起来。@MikeC好的，因此，我会创建一个空白id，这样它将是唯一的，我之所以说空白是因为我不知道要添加什么，我不知道这与我的评论有什么关系。@MikeC我不明白，很抱歉misunderstanding@MikeC好吧，重读你写的，我明白了。我尝试过其他基于身体的方法，效果很好。但是，如果我点击身体的任何地方，覆盖图就会出现，这不是我想要的@mauroc8我已经做了你建议的建议，我以前做过这些更改，但仍然不起作用。我不知道为什么它不起作用。我想如果我做了一个回调并做了如下操作：$（'#PS'）.submit（函数（事件）{//debugger；}）；它会告诉我哪里出了问题，但似乎ajax正在被调用。不知道发生了什么事

function overlayDisplayButton() {
    if ($("#overlay").length > 0) {
        removeOverlay();
    } else {
        displayOverlay("Loading...");
    }
}