多物料设计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')，它会做自己的队列系统，并且在消息之间将正确的类应用于快餐栏，以获得给定的消息指示器级别。