javascript - 使代码同步运行，该代码驻留在通过AJAX调用调用的函数中

我有一个下拉通知窗口，当我运行某些AJAX函数时会显示该窗口，下面将其简化为：

function notifyComplete(type, alert_el, response) {

    var msg = response.output;
    var result = response.result;

    // Update msg in alert box
    alert_el.text(msg);

    if (result == 'success') {
        alert_el.addClass('alert-success');
    } else {
        alert_el.addClass('alert-danger');
    }

    // Slide in alert box
    alert_el.addClass('visible');

}

...我可能这样称呼它：

var alert_el = $('#top_notify').find('.alert');

// Remove any additional classes added by a possible previous run
alert_el.removeClass('visible alert-success alert-info alert-danger alert-warning');

getAjaxData(loadUrl, dataObject, 'POST', 'json')

    .done(function(response) {
        notifyComplete(notify_type, alert_el, response);
    });

..如果感兴趣，这里是getAjaxData函数：

function getAjaxData(loadUrl, dataObject, action, type) {

    return jQuery.ajax({
        type: action,
        url: loadUrl,
        data: dataObject,
        dataType: type
    });

}

现在，我想做的就是找到一种放置此代码的方法：

var alert_el = $('#top_notify').find('.alert');

// Remove any additional classes added by a possible previous run
alert_el.removeClass('visible alert-success alert-info alert-danger alert-warning');

...在不需要每次使用notifyComplete函数的地方重复的地方。

显然，如果总是在AJAX块中调用notifyComplete，那么我不能将其放在函数本身中，因为那样一来，如果不重新加载页面，您将无法使通知框向下滑动多次。

另外，之后无法执行此操作，因为向下通知窗口的持续时间由CSS处理，因此JS不知道何时完成。

我已经在CodePen here上构建了一个当前的工作示例，但是由于crossorigin.me的问题，它似乎已损坏。

最佳答案

如果您想打电话

var alert_el = $('#top_notify').find('.alert');

// Remove any additional classes added by a possible previous run
alert_el.removeClass('visible alert-success alert-info alert-danger alert-warning');

在每个$.ajax()调用之前，您可以在$.ajax()中的beforeSend getAjaxData函数中包含各行

function getAjaxData(loadUrl, dataObject, action, type) {

    return jQuery.ajax({
        beforeSend: function(jqxhr, settings) {
                      var alert_el = $('#top_notify').find('.alert');
                      // Remove any additional classes added by a possible previous run
                      alert_el
                     .removeClass('visible alert-success alert-info alert-danger alert-warning');
        },
        type: action,
        url: loadUrl,
        data: dataObject,
        dataType: type
    });

}

如果尝试在$.ajax()调用之后调用两行，尽管在notifyComplete之前，您可以将函数数组传递给.done()

getAjaxData(loadUrl, dataObject, 'POST', 'json')
.done([
  function(response) {
    var alert_el = $('#top_notify').find('.alert');
    // Remove any additional classes added by a possible previous run
    alert_el
    .removeClass('visible alert-success alert-info alert-danger alert-warning');
  }
  , function(response) {
      notifyComplete(notify_type, alert_el, response);
  }
 ]);

  如果我可以通过函数名称作为回调而不是使用
  匿名函数，因此必须在内部使用if/else
  但显然也需要一种在参数中包含参数的方式
  打回来。


您可以使用Function.prototype.bind()将其他参数传递给命名函数集，该函数集作为beforeSend的$.ajax()选项的值。包含用于检查附加对象或值是传递的对象还是作为jqxhr的默认第一个参数的jQuery beforeSend对象的逻辑。

  function handleBeforeSend(args, jqxhr, settings) {
    console.log(args, jqxhr, settings);
    if (args.hasOwnProperty("additionalSettings")) {
      // do stuff with `args.additionalSettings`
    }
  }

  $.ajax({
    url:"/path/to/server/",
    type: "POST",
    beforeSend: handleBeforeSend.bind(null, {additionalSettings:[0,1,2]})
  });

jsfiddle https://jsfiddle.net/dackdrek/



在当前javascript内实现

$().ready(function() {

  function handleBeforeSend(bool, jqxhr, settings) {
    console.log(bool, jqxhr, settings);
    if (bool === true) {
      var alert_el = $('#top_notify').find('.alert');
      // Remove any additional classes added by a possible previous run
      alert_el.removeClass('visible alert-success alert-info alert-danger alert-warning');
    }
  }

  function notifyComplete(type, alert_el, response) {

    var msg = response.output;
    var result = response.result;

    // Update msg in alert box
    alert_el.text(msg);

    if (result == 'success') {
      alert_el.addClass('alert-success');
    } else {
      alert_el.addClass('alert-danger');
    }

    // Slide in alert box
    alert_el.addClass('visible');

  }

  function getAjaxData(loadUrl, dataObject, action, type, beforeSend, bool) {

    return jQuery.ajax({
      type: action,
      url: loadUrl,
      data: dataObject,
      dataType: type,
      beforeSend: beforeSend.bind(null, bool)
    });

  }
  // pass `true` to `handleBeforeSend`
  getAjaxData("/echo/json/", {
      json: JSON.stringify({
          "output": "123",
          "result": "success"
        })
      }, "POST", "json", handleBeforeSend, true)
    .then(function(response) {
      notifyComplete(null, $('#top_notify'), response)
    });
  setTimeout(function() {
  // pass `false` to `handleBeforeSend`
  getAjaxData("/echo/json/", {
      json: JSON.stringify({
          "output": "123",
          "result": "success"
        })
      }, "POST", "json", handleBeforeSend, false)
    .then(function(response) {
      notifyComplete(null, $('#top_notify'), response)
    })
   }, 5000)
})

jsfiddle https://jsfiddle.net/dackdrek/4/

关于javascript - 使代码同步运行，该代码驻留在通过AJAX调用调用的函数中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41351971/