JavaScript/jQuery를 사용하여 실행을 "일시 중지"하고 사용자 입력 대기

Question

jQuery를 사용하여 표준 기능 (예 : alert 및 confirm)을 덮어 쓰려고합니다. 이를 위해

, 내가 경고 또는 확인이 코드를 요청하는 대화 상자를 보여줍니다 뭔가를 구축하고, 같은이 보인다 :

이

function throwError(e_content) { 
    var e_title = "Error"; 
    var e = errordiv; 
    var return_error = e.start + e.header_start + e_title + e.header_end + e.body_start + e_content + e.body_end + e.end; 
    jQuery("body").append(return_error); 
    return; 
} 

function throwConfirm(e_content) { 
    function confirmCallback() { 
     var retval = "213"; 
     jQuery("body").on("click", function (e) { 
      if (e.target.id == "confirm_okay") { 
       hideError(); 
       retval = true; 
      } 
      else if (e.target.id == "confirm_cancel") { 
       hideError(); 
       retval = false; 
      } 
     }) 

     retval == "213" ? confirmCallback() : retval; 
     return retval; 
    } 

    var e_title = "Confirm Action"; 
    var e = confirmdiv; 
    var return_error = e.start + e.header_start + e_title + e.header_end + e.body_start + e_content + e.body_end + e.end; 
    jQuery("body").append(return_error); 

    return confirmCallback(); 
} 

function hideError() { 
    jQuery(document).find(".custom_error_div").remove(); 
    return; 
} 

var errordiv = { 
    start: '<div class="custom_error_div"><div class="custom_error_div_content" >', 
    end: '</div></div>', 

    header_start: '<div class="custom_error_div_header">', 
    header_end: '</div>', 

    body_start: '<div class="custom_error_div_body">', 
    body_end: '<div class="bottom-buttons">' 
    + '<button id="alert_okay">Ok</button>' 
    + '</div>' 
}; 

var confirmdiv = { 
    start: '<div class="custom_error_div"><div class="custom_error_div_content" >', 
    end: '</div></div>', 

    header_start: '<div class="custom_error_div_header">', 
    header_end: '</div>', 

    body_start: '<div class="custom_error_div_body">', 
    body_end: '<div class="bottom-buttons">' 
    + '<button id="confirm_okay">Ok</button><button id="confirm_cancel">Cancel</button>' 
    + '</div>' 
}; 

이의 기초가 작동

, 그것은 경고하고 확인한다 내가 원할 때 - 확인이 문제가 될 때 "예"또는 "아니오"를 클릭하면 throwConfirm 함수가 true 또는 false를 반환한다고 가정하고 대신이 상황이 발생하지 않는 것으로 보입니다. 대신 최대 호출에 도달합니다. 크기.

이 복잡하고 복잡한 손의 질문에 관련이없는 일을 뒤에 기초 - 내가 알아야 할 사항은 다음과 같습니다
나는 어떤 버튼을 사용자가 클릭에 따라 true 또는 false를 반환하는 throwConfirm 기능을 얻는 방법 ?

Answer 1

이렇게하는 한 가지 방법을 보여줍니다. 그것은 일종의 미봉책 - 당신은 글로벌 _callback 변수

"use strict"; 
 

 
function throwError(e_content) { 
 
    var e_title = "Error"; 
 
    var e = errordiv; 
 
    var return_error = e.start + e.header_start + e_title + e.header_end + e.body_start + e_content + e.body_end + e.end; 
 
    jQuery("body").append(return_error); 
 
    return; 
 
} 
 

 
function throwConfirm(e_content, callback) { 
 
    hideError(); 
 
    var e_title = "Confirm Action"; 
 
    var e = confirmdiv; 
 
    var return_error = e.start + e.header_start + e_title + e.header_end + e.body_start + e_content + e.body_end + e.end; 
 
    jQuery("body").append(return_error); 
 
    // this is a hack, but I'm tired 
 
    _callback = callback 
 
} 
 

 
function hideError() { 
 
    jQuery(document).find(".custom_error_div").remove(); 
 
    return; 
 
} 
 

 
var errordiv = { 
 
    start: '<div class="custom_error_div"><div class="custom_error_div_content" >', 
 
    end: '</div></div>', 
 

 
    header_start: '<div class="custom_error_div_header">', 
 
    header_end: '</div>', 
 

 
    body_start: '<div class="custom_error_div_body">', 
 
    body_end: '<div class="bottom-buttons">' 
 
    + '<button id="alert_okay">Ok</button>' 
 
    + '</div>' 
 
}; 
 

 
var confirmdiv = { 
 
    start: '<div class="custom_error_div"><div class="custom_error_div_content" >', 
 
    end: '</div></div>', 
 

 
    header_start: '<div class="custom_error_div_header">', 
 
    header_end: '</div>', 
 

 
    body_start: '<div class="custom_error_div_body">', 
 
    body_end: '<div class="bottom-buttons">' 
 
    + '<button id="confirm_okay">Ok</button><button id="confirm_cancel">Cancel</button>' 
 
    + '</div>' 
 
}; 
 

 
var _callback; 
 
function init() { 
 
    jQuery("body").on("click", function (e) { 
 
     if (e.target.id == "confirm_okay") { 
 
      hideError(); 
 
      _callback(true); 
 
     } 
 
     else if (e.target.id == "confirm_cancel") { 
 
      hideError(); 
 
      _callback(false); 
 
     } 
 
    }) 
 
    $(document).on("click", "#foo", function() { throwConfirm("bar", doSomethingWithMyRetval) }); 
 
} 
 

 
function doSomethingWithMyRetval(foo) { 
 
// foo foo foo 
 
console.log("The retval from the confirm was: "+foo); 
 
} 
 
$(document).ready(init);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<body> 
 
<input id="foo" type="button"> 
 
</body>