javascript - 回调中的值不会在每次函数调用时更新

Question

我有一个非常简单的函数，如下所示。这会在确认这是他们想要执行的操作后删除用户单(注意自定义 confirm)。在确认时的回调函数中，id 第一次设置正确，但之后永远不会更新。

如果我在 deleteSlip 函数中 console.log，id 总是正确的。如果我在回调中使用 console.log，它始终是我发送的第一个 id。当我调试 javascript 时，我看到了同样的事情。该值第一次正确，但之后永远不会更新。

在deleteSlip中更新时，如何获取回调函数中的值进行更新？

function deleteSlip(id){
    //  id is correct right here
    confirm('This will delete your slip.  Are you sure you want to do this?', function(confirmed){
        //  id here is always the first value from deleteSlip, and never changes
        if (confirmed)
        {
          // do stuff 
        }
    });
}

被调用的 confirm 是自定义的，定义如下:

window._originalConfirm = window.confirm;
window.confirm = function(text, cb) {
  bootStrapConfirm = function() {
    if(! $.fn.modal.Constructor)
      return false;
    if($('#windowConfirmModal').length == 1)
      return true;
    $('body').append(' \
    <div id="windowConfirmModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true"> \
      <div class="modal-body"> \
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> \
        <p> alert text </p> \
      </div> \
      <div class="modal-footer"> \
        <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">No</button> \
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Yes</button> \
      </div> \
    </div> \
    ');
    function unbind() { 
      $("#windowConfirmModal .btn-primary").unbind('click', confirm);
      $("#windowConfirmModal .btn-danger").unbind('click', deny);
    }
    function confirm() { cb(true); delete cb;}
    function deny() { cb(false); delete cb;}
    $("#windowConfirmModal .btn-primary").bind('click', confirm);
    $("#windowConfirmModal .btn-danger").bind('click', deny);
    return true;
  }
  if ( bootStrapConfirm() ){
    $('#windowConfirmModal .modal-body p').text(text);
    $('#windowConfirmModal').modal();
  }  else {
    console.log('bootstrap was not found');
    window._originalConfirm(text);
  }
}

deleteSlip 是按钮上的 onclick HTML 属性。像这样:

onclick="deleteSlip(1234)"

再次重申，deleteSlip 中的id 是正确的。 confirm 回调中的 id 是它最先得到的，永远不会改变。回调可能是异步的，但我在任何给定时间只调用一次。 deleteSlip 在按钮点击时触发。

我之前发布过这个问题，但被告知它太模棱两可了。请让我知道您需要查看什么来帮助我解决这个问题。 “做事”区域有一个 ajax 调用，但在此之前的值是错误的(因此不会向没有阅读整个问题的人显示它)。

更新:看起来这是自定义 confirm 的问题。我将自定义 confirm 更改为以下内容:

window.confirm = function(text, cb) {
  bootStrapConfirm = function() {
    if(! $.fn.modal.Constructor)
      return false;
    if($('#windowConfirmModal').length == 1)
      return true;
    $('body').append(' \
      <div id="windowConfirmModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true"> \
      <div class="modal-body"> \
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> \
        <p> alert text </p> \
      </div> \
      <div class="modal-footer"> \
        <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">No</button> \
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Yes</button> \
      </div> \
      </div> \
    ');
    return true;
  }
  if ( bootStrapConfirm() ){
    function confirm() { cb(true); }
    function deny() { cb(false); }
    $("#windowConfirmModal .btn-primary").unbind('click', confirm);
    $("#windowConfirmModal .btn-danger").unbind('click', deny);
    $("#windowConfirmModal .btn-primary").bind('click', confirm);
    $("#windowConfirmModal .btn-danger").bind('click', deny);
    $('#windowConfirmModal .modal-body p').text(text);
    $('#windowConfirmModal').modal();
  }  else {
    console.log('bootstrap was not found');
    window._originalConfirm(text);
  }
}

现在，当调用 confirm 时，它会调用它所见过的所有 id。我没有正确解除绑定(bind)？

Answer 1

你这里有范围问题。 id 在 deleteSlip() 中定义，而不是在回调中。因此，您应该将 id 作为参数传递给回调。

在内置的 jquery 中，这将通过在将回调函数提供给 confirm() 之前添加参数来完成。虽然不确定您将如何去做。

在你的情况下我会这样做:

function deleteSlip(id){
  //  id is correct right here
  confirm('This will delete your slip.  Are you sure you want to do this?', id, function(cb_id, confirmed){
      //  id here is always the first value from deleteSlip, and never changes
      if (confirmed)
      {
        // do stuff 
      }
  });
}

和:

window._originalConfirm = window.confirm;
window.confirm = function(text, id, cb) {
  bootStrapConfirm = function() {
    if(! $.fn.modal.Constructor)
      return false;
    if($('#windowConfirmModal').length == 1)
      return true;
    $('body').append(' \
      <div id="windowConfirmModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true"> \
      <div class="modal-body"> \
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> \
        <p> alert text </p> \
      </div> \
      <div class="modal-footer"> \
        <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">No</button> \
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Yes</button> \
      </div> \
    </div> \
    ');
    function unbind() { 
      $("#windowConfirmModal .btn-primary").unbind('click', confirm);
      $("#windowConfirmModal .btn-danger").unbind('click', deny);
    }
    function confirm() { cb(id, true); delete cb;}
    function deny() { cb(id, false); delete cb;}
    $("#windowConfirmModal .btn-primary").bind('click', confirm);
    $("#windowConfirmModal .btn-danger").bind('click', deny);
    return true;
  }
  if ( bootStrapConfirm() ){
    $('#windowConfirmModal .modal-body p').text(text);
    $('#windowConfirmModal').modal();
  }  else {
    console.log('bootstrap was not found');
    window._originalConfirm(text);
  }
}

免责声明:没有运行代码，因此可能存在一些错误。但这个想法应该是合理的。