클래스 함수의 반환 값

Question

Boostrap을 기반으로 맞춤 알림 클래스를 작성하려고합니다. 모든 것이 아직 어리지만 문제가 발생했습니다. 클릭 이벤트가 발생한 경우에만 클릭 된 버튼에 따라 값을 반환 할 수 있습니까? 내가 값을 설정하는 방법 모달되기 전에 여기에서 당신은 당신이 볼 수 있듯이, 경고가 (분명히)이 나타납니다

다음

$modal.on('click', '[data-alertify="cancel"]', function(){ 
     var value = 'no'; 
     $modal.modal('hide'); 
     return value; 
    }); 
    $modal.on('click', '[data-alertify="confirm"]', function(){ 
     var value = 'yes'; 
     $modal.modal('hide'); 
     return value; 
    }); 

내 클래스와 테스트 코드 JSFiddle

입니다 (아주 쉬운 시험) 볼 수 있습니다 표시됩니다. 어떻게해야합니까? 올바른 값이 반환 될 때까지 기다린 다음 경고 할 수 있습니까?

Answer 1

이 콜백 함수는 비동기 적으로 호출되며 그 안에있는 return 문에 의해 반환 된 값은 나중에 사용할 수 없습니다. 전체 프로세스가 동기 인 경우 다음 구조에만 작동합니다 : 사용자가 아직 클릭하지 않았기 때문에

var ret = Alertify.alert({ 
    content: 'This is MY alert content!' 
}); 

...하지만 Alertify.alert()가 원하는 값을 반환하지 않습니다. 이 alert() 함수는 아무 것도 반환하지 않으며 여전히 발생해야하는 클릭의 결과를 확실히 반환 할 수 없습니다.

이 시나리오는 약속을하기에 이상적입니다. 이는 모습입니다 당신은 그렇게 할 때

var showModal = function (alert_id) { 
    $('body').append($html); 
    var $modal = $('#' + alert_id); 
    $modal.modal('show'); 
    var dfd = $.Deferred(); // create a promise 
    $modal.on('click', '[data-alertify="cancel"]', function(){ 
    var value = 'no'; 
    $modal.modal('hide'); 
    dfd.resolve(value); // instead of returning the value, resolve the promise with it 
    }); 
    $modal.on('click', '[data-alertify="confirm"]', function(){ 
    var value = 'yes'; 
    $modal.modal('hide'); 
    dfd.resolve(value); 
    }); 
    $modal.on('hidden.bs.modal', function(){ 
    $(this).remove(); 
    dfd.resolve(); 
    }); 
    return dfd.promise(); // return the (unresolved) promise 
}; 

지금 Alertify.alert이 then 방법을 노출하는 약속 개체를 반환합니다, 당신은을 통과 :

먼저 약속을 반환 할 showModal 기능을 변경 콜백 :

Alertify.alert({ 
    content: 'This is MY alert content!' 
}).then(function(ret) { 
    alert(ret); 
}); 

... 그게 전부입니다.

업데이트 된 내용은 fiddle입니다.