javascript - 多种 Material 设计Lite小吃店上的时间安排错误

例如，我处理在成功完成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是匹配的类。

对于这些消息中的每一个，我都使用类和消息更新现有的小吃店。

然后，我 call 小吃吧，如此处记录: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的小吃店

最佳答案

快餐栏组件具有内部队列系统，用于处理连续显示多个消息。您的代码在逻辑上反射(reflect)了您所看到的计时结果。您的代码将删除/添加类，然后将消息推送到队列中。但是，在这些消息完成显示之前，它将转到下一条消息。哪一条消息被放入内部队列，然后在您的代码中处理下一条。再次修改类，依此类推。

此处要做的最好的事情是编写您自己的对象来处理队列并抽象化此着色逻辑。这样，例如，您调用NotifierObj.show('message', 'error')，它将执行自己的队列系统，并且在消息之间，将给定消息指示符级别的正确类应用于小吃栏。