多物料設計lite小吃店時序錯誤

Question

例如，我正在處理Symfony實體更新成功完成時出現的通知。

什麼我現在做的是在這裏（+的jsfiddle：https://jsfiddle.net/atierant/6e0s4rk1/15/）：

var messagesTypes = { 
 
    "notice": ["This is a green NOTICE"], 
 
    "error": ["This is a red ERROR"], 
 
    "warning": ["This is a yellow WARNING"], 
 
    "info": ["This is a blue INFO"] 
 
}; 
 

 
var colorType = { 
 
    "info": { 
 
    "class": "mdl-color--blue-400", 
 
    "icon": "done" 
 
    }, 
 
    "error": { 
 
    "class": "mdl-color--red-400", 
 
    "icon": "error" 
 
    }, 
 
    "warning": { 
 
    "class": "mdl-color--amber-400", 
 
    "icon": "warning" 
 
    }, 
 
    "notice": { 
 
    "class": "mdl-color--green-400", 
 
    "icon": "done" 
 
    } 
 
}; 
 

 
(function() { 
 
    'use strict'; 
 
    var snackbarContainer = document.querySelector('#snackbar'); 
 
    var timeout = 2000; 
 
    var actionText = 'Ok'; 
 
    var handler = function(event) {}; 
 

 
    // elements.forEach(element => { }) correcpond à for(var element in elements) 
 
    // infoType est un objet qui correspond à un parcours de boucle 
 
    Object.keys(messagesTypes).forEach(infoType => { 
 

 
    // Définition de l'objet à donner à manger à la SnackBar 
 
    var objTest = {}; 
 
    objTest = { 
 
     class: colorType[infoType].class, 
 
     icon: colorType[infoType].icon, 
 
     message: messagesTypes[infoType].toString(), 
 
     type: infoType, 
 
     timeout: timeout, 
 
     actionHandler: function(event) {}, 
 
     actionText: actionText 
 
    }; 
 

 
    // Retrait d'une éventuelle classe existante dans la liste 
 
    // Pour chacune des classList, si elle matche le pattern je la vire 
 
    var re = new RegExp(/(^|\s)mdl-color--\S+/, "gi"); 
 
    for (var i = 0, len = snackbarContainer.classList.length; i < len; i++) { 
 
     // ma classe en cours 
 
     var currentClass = snackbarContainer.classList[i]; 
 
     // Je réalise mon test 
 
     var result = re.test(currentClass); 
 
     // Trace pour voir si je matche ma regex 
 
     console.log('Je traite : ', currentClass, ' resultat ', result); 
 
     if (result === true) { 
 
     snackbarContainer.classList.remove(currentClass); 
 
     } 
 
    }; 
 

 
    snackbarContainer.classList.add(objTest.class); 
 
    snackbarContainer.MaterialSnackbar.showSnackbar(objTest); 
 
    /*setTimeout(function() { 
 
     snackbarContainer.MaterialSnackbar.showSnackbar(objTest); 
 
    }, 5000);*/ 
 
    }); 
 
})(); 
 

 

 
function r(f) { 
 
    /in/.test(document.readyState) ? setTimeout('r(' + f + ')', 9) : f(); 
 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.1/material.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.1/material.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="snackbar" class="mdl-js-snackbar mdl-snackbar"> 
 
    <div class="mdl-snackbar__text"></div> 
 
    <button class="mdl-snackbar__action" type="button"></button> 
 
</div>

根據服務器發送警報類型（錯誤，警告，通知，信息），我嘗試更改出現的Material Design Lite零食欄的類，以更改它的顏色。

我刪除mdl-color--{color}-*類，如果它存在，我會根據正確的類型應用一個新的mdl-color類。

messageTypes是諸如Symfony返回（在FlashBag系統中）的消息。

colorType是匹配的類。

對於這些消息中的每一個，我都會用類和消息更新現有的小吃店。

然後我叫小吃吧，因爲這裏記載：https://getmdl.io/components/#snackbar-section

現在，我有時序問題。它首先對班級進行了所有更改，然後用隨機消息和最後一個顏色班級來顯示小吃店的怪異方式。

removeClass
addClass
removeClass
addClass
removeClass
addClass
removeClass
addClass
然後
顯示小吃吧與消息1
顯示小吃吧與消息2
顯示小吃吧與消息3
顯示小吃吧與消息4

如何可以按此順序設置：

removeClass
addClass
顯示小吃吧與消息1
removeClass
addClass
顯示小吃吧與消息2
removeClass
addClass
帶消息3的顯示快餐欄
個 removeClass
addClass
顯示小吃吧與消息4

Answer 1

的小吃吧部件具有一個內部排隊系統來處理表示在一行中的多個消息。你的代碼在邏輯上反映了你所看到的時間結果。您的代碼正在刪除/添加類，然後將消息推送到隊列中。但是，在這些消息完成顯示之前，它會轉到下一條消息。哪些消息被引入到內部隊列中，然後在您的代碼中處理下一個消息。再次修改類等等。

這裏要做的最好的事情是編寫自己的對象來處理隊列並將這個着色邏輯抽象出來。這樣你就可以打電話給NotifierObj.show('message', 'error')，它會做自己的隊列系統，並且在消息之間將正確的類應用於快餐欄，以獲得給定的消息指示器級別。