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);
}

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

Javascript将回调函数添加到传递的回调变量中

1 个答案: