javascript - 多 Material 设计精简版 snackbar 的时间错误

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 snackbar 的类，以更改其颜色。

我删除了 mdl-color--{color}-* 类(如果它存在)，并根据正确的类型应用了一个新的 mdl-color 类。

messageTypes 是诸如 Symfony 返回(在 FlashBag 系统中)之类的消息。

colorType 是匹配类。

对于这些消息中的每一条，我都会用类和消息更新现有的 snackbar 。

然后我调用 snackbar ，如此处记录:https://getmdl.io/components/#snackbar-section

目前，我遇到了时间问题。它首先对类进行所有更改，然后以奇怪的方式显示带有随机消息的 snackbar 和最后一个颜色类。

移除类
添加类
移除类
添加类
移除类
添加类
移除类
添加类
然后
显示带有消息 1 的 snackbar
显示带有消息 2 的 snackbar
显示带有消息 3 的 snackbar
显示带有消息 4 的 snackbar

如何按此顺序设置:

移除类
添加类
显示带有消息 1 的 snackbar
移除类
添加类
显示带有消息 2 的 snackbar
移除类
添加类
显示带有消息 3 的 snackbar
移除类
添加类
显示带有消息 4 的 snackbar

Answer 1

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

这里最好的做法是编写您自己的对象来处理队列并抽象出这种着色逻辑。这样你就可以调用 NotifierObj.show('message', 'error') ，它会做自己的队列系统，并且在消息之间将正确的类应用到给定消息指示器级别的 snackbar .