내가 다음이 온 클릭

Question

작동하지에서는 setTimeout .

원래 콜백을 사용하려고 했으므로 결과를 검색 할 때 오버레이가 사라질 수 있지만 그 결과가 어떻게 나타나는지는 충분히 이해하지 못하고 결과를 표시하는 데 지연이 있습니다.

다음

는 내가 사용하고 스크립트입니다

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

그리고 그 다음은 내가 그가에서는 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> 

그래서 내가 생각 나는 온 클릭을 할 경우 setTimeout (...)과 같게 설정하면 3 초 동안 지속 된 다음 사용자가 결과를 볼 수있게됩니다.

그러나 문제는 아니며 문제가 무엇인지 알지 못합니다.

Answer 1

은 현재 HTML은 당신이 복사되지 않습니다 정확히 :

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

오류는 대신 인수로 전달하는,overlayDisplayButton를 호출 있다는 것입니다.

자바 스크립트 함수는 값이입니다. setTimeout 함수는 첫 번째 인수로 함수를 필요, 그래서 당신은 이런 식으로 통과해야 그 외에

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

, 그것은 @ 마이크 C가 지적한 것 맞습니다 : overlayDisplayButton 그냥 버튼에 이벤트 핸들러를 추가하고있다. 당신이 원하는 것은 아마도 이것입니다 :

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