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 = informCallback; 更改为:

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

但是，如果您想将一些数据传递到回调中(如果您想在回调中包含一些逻辑，它可能是一个 showLoader 函数) - 只需将其传递到您的回调中，如下所示:

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

但不要忘记在回调中调用它!