獲取代碼同步運行駐留在通過Ajax調用

Question

我有一個下拉通知窗口，我告訴我的時候運行某些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 
    }); 

} 

現在我所要做的是找到一種方法，我可以把這個代碼：

​​

...其中地方我沒有我想用notifyComplete功能每次都重複它。

顯然，如果notifyComplete總是在AJAX塊中調用，那麼我不能把它放入函數本身，因爲如果沒有頁面，您將無法獲得通知框多次滑動重裝。

另外，我不能這樣做之後作爲下滑通知窗口持續時間由CSS處理，因此JS不知道它什麼時候完成。

我已經建在CodePenhere當前工作的例子，但似乎它壞因爲crossorigin.me

Answer 1

如果你想每個$.ajax()調用之前調用

​​

，您可以包括內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()beforeSend函數中的行如果你想調用兩行後$.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()傳遞額外的參數設置的$.ajax()beforeSend選項值命名函數。包含邏輯以檢查附加對象或值是否爲傳遞對象或作爲beforeSend的默認第一個參數的jQuery jqxhr對象。

​​

的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/

Answer 2

一個問題，你有幾個選項。

1. 可以在notifyComplete功能使用setTimeout，將其放置在年底給它一個合理的時間量，以便通知警報看來

2. 後另外，我可以」自動消失隨後滑動通知窗口持續時間由CSS處理，因此JS不知道它何時完成。

   這是不正確的，您可以使用trantisitionend或animationend事件來檢查CSS效果何時完成。如果您使用的是類似引導程序的內容，則可以在警報元素中使用transitionend。