Javascriptコールバック関数をコールバック変数に渡す

Question

私は、ユーザが「受け入れ」をクリックしたときにトリガされる関数を受け付ける確認ダイアログ関数を作成しました。

これで、この関数にコールバックを追加して、システムが応答していることをユーザーに知らせるためのローダーをレンダリングすることができます。

これまでのコードは次のとおりです。

confirmDialog('Confirm deletion', 'Are you sure you want to delete the internet?', function(){alert('test');}); 
 

 
function closeConfirmDialog() { 
 
    var dialog = document.getElementById('confirmDialog'); 
 
    var overlay = document.getElementById('dialogOverlay'); 
 
    if (dialog) { document.getElementsByTagName('BODY')[0].removeChild(dialog); } 
 
    if (overlay) { document.getElementsByTagName('BODY')[0].removeChild(overlay); } 
 
} 
 
function confirmDialog(title, message, confirmCallback) { 
 
    // Closing any active confirmDialog 
 
    closeConfirmDialog(); 
 
    // Create all required elements for the dialog box 
 
    var dialogOverlay = document.createElement('div'); 
 
    var dialogBox = document.createElement('div'); 
 
    var buttonBox = document.createElement('div'); 
 
    var titleBox = document.createElement('div'); 
 
    var textBox = document.createElement('div'); 
 
    var cancelButton = document.createElement('a'); 
 
    var successButton = document.createElement('a'); 
 
    // Add classes/content to elements 
 
    dialogOverlay.setAttribute('id', 'dialogOverlay'); 
 
    dialogOverlay.onclick = function() { closeConfirmDialog(); }; 
 
    dialogBox.setAttribute('id', 'confirmDialog'); 
 
    buttonBox.className = 'buttonBox'; 
 
    titleBox.className = 'titleBox'; 
 
    titleBox.innerHTML = title; 
 
    textBox.className = 'textBox'; 
 
    textBox.innerHTML = message; 
 
    cancelButton.className = 'dangerbtn left'; 
 
    cancelButton.innerHTML = 'Cancel'; 
 
    cancelButton.onclick = function() { closeConfirmDialog(); }; 
 
    successButton.className = 'successbtn right'; 
 
    successButton.innerHTML = 'Confirm'; 
 
    /** 
 
     * This is where I would like to modify the confirmCallback function to always show a loader. 
 
     */ 
 
    // Here is where I set the callback to the successButton onclick event. 
 
    successButton.onclick = confirmCallback; 
 
    // Add all elements to their respective wrappers 
 
    buttonBox.appendChild(cancelButton); 
 
    buttonBox.appendChild(successButton); 
 
    dialogBox.appendChild(titleBox); 
 
    dialogBox.appendChild(textBox); 
 
    dialogBox.appendChild(buttonBox); 
 
    // Append the overlay and finished confirmbox to the body. 
 
    document.getElementsByTagName('BODY')[0].appendChild(dialogBox); 
 
    document.getElementsByTagName('BODY')[0].appendChild(dialogOverlay); 
 

 
    return false; 
 
}

body { 
 
    font-family: arial; 
 
} 
 
#confirmDialog { 
 
    position: absolute; 
 
    top: 10%; 
 
    left: 25%; 
 
    width: 50%; 
 
    border: 1px solid #000; 
 
    padding: 10px 10px 0 10px; 
 
    box-sizing: border-box; 
 
} 
 
#confirmDialog>.titleBox { 
 
    font-weight: bold; 
 
    font-size: 16px; 
 
    margin-bottom: 4px; 
 
} 
 
#confirmDialog>.textBox { 
 
    margin-bottom: 4px; 
 
} 
 
#confirmDialog>.buttonBox { 
 
    border-top: 1px solid #000; 
 
    padding: 5px 10px; 
 
    margin: 0 -10px; 
 
    float: left; 
 
    width: 100%; 
 
} 
 
#confirmDialog>.buttonBox>.dangerbtn { 
 
    background-color: #d9534f; 
 
    border-color: #d9534f; 
 
    color: #fff; 
 
    padding: 4px 12px; 
 
    float: left; 
 
    cursor: pointer; 
 
} 
 
#confirmDialog>.buttonBox>.successbtn { 
 
    background-color: #5cb85c; 
 
    border-color: #5cb85c; 
 
    color: #fff; 
 
    padding: 4px 12px; 
 
    float: right; 
 
    cursor: pointer; 
 
}

Answer 1

あなただけのローダー（渡されたコールバックで、何がそれを気にしなければならない）表示したい場合は、この行successButton.onclick = confirmCallback;を変更：

successButton.onclick = function() { 
    confirmCallback(); 
    showLoader(); 
} 

しかし、あなたの場合いくつかのデータをコールバックに渡したい（コールバックにいくつかのロジックが必要な場合は、showLoader関数かもしれません） - コールバックに次のように渡します：

successButton.onclick = function() { 
    confirmCallback(showLoader); 
} 

しかし、あなたのコールバックでそれを呼び出すことを忘れないでください！