Question

我有一个可以在同一页面上多次调用的消息传递功能。每次调用时，屏幕顶部都会显示一条新消息，并且具有由递增全局设置的唯一ID。

该功能的一般概念如下：

var messageTimer = function(msgid, duration) {
  ...
  var interval = setInterval(
    function() {
    ...
    },
    duration
  )
};

在上面的代码中，创建了一条新消息并应用了一个计时器。如果计时器用完，消息将消失。但是，如果在关闭按钮以外的任何地方单击该消息，则计时器应该停止并且消息应该保持到手动关闭为止。

如何找到单击消息框的间隔ID？可能还有3个其他盒子同时打开。

$('body').on('click', '.msg', function() {

});

由于我只有一个类来触发点击，我认为找到这个的唯一可行方法是在消息框的ID中设置一个额外的字段？然而，这种方法似乎没有必要和麻烦。

Answer 1

我会在存储间隔ID的消息上设置数据属性：

var messageTimer = function(msgid, duration) {
  ...
  var interval = setInterval(
    function() {
    ...
    },
    duration
  );
  $("#" + msgid).data("i", interval);
};

然后回想一下你的消息内容：

$('body').on('click', '.msg', function() {
    clearInterval(parseInt($(this).data("i"), 10));
});

Answer 2

您使用的是html5吗？您可以向节点添加自定义数据属性。此功能的javascript API描述为here。

clearInterval包含setInterval的方法之外

2 个答案: