重复JS函数的最佳方法

有时可能会调用该函数太快，并创建多个元素，但由于它使用的ID对每个实例都不是唯一的，因此淡出和移除div的部分仅适用于顶级元素，而不是全部。所以我最终得到了一个静态div标签，它不是淡入淡出。重复JS函数的最佳方法

我能想到的最好的事情就是简单地重复这个过程。我该怎么做，还是有更好的方法？

document.triggerNotification = function (type, message) { 
    jQuery(document.body).append("<div class='push-notification push-"+type+"' id='notification'>"+message+"</div>"); 

    jQuery('#notification').delay(1500).fadeOut(1200, function() { 
     jQuery('#notification').remove(); 
    }); 
}

来源

2010-09-21 Webnet

只是缓存创建的元素，不需要IDS

function (type, message) { 
    var el = $("<div class='push-notification push-"+type+"'>"+message+"</div>"); 
    jQuery(document.body).append(el); 

    el.delay(1500).fadeOut(1200, function() { 
     el.remove(); 
    }); 
}

来源

2010-09-21 19:58:55 mikerobi

这是最好的解决方案。我还会注意到，在这种情况下，setTimeout比延迟更合适。延迟更适合排队的fx，但由于您只会在元素上执行一个动画，setTimeout就足够了。 – Ender 2010-09-21 20:05:21

给他们提供唯一的ID如何？

var notificationCount=0; 
document.triggerNotification = function (type, message) { 
    notificationCount++; 
    var notificationId="notification"+notificationCount; 
    jQuery(document.body).append("<div class='push-notification push-"+type+"' id='"+notificationId+"'>"+message+"</div>"); 

    jQuery('#'+notificationId).delay(1500).fadeOut(1200, function() { 
     jQuery('#'+notificationId).remove(); 
    }); 
}

来源

2010-09-21 19:55:52 spender

+1击败我。 :) – casablanca 2010-09-21 19:56:49

根本不需要身份证件（请参阅我的回答） – mikerobi 2010-09-21 19:59:49

有时候你会逐字地阅读这个问题。你的方法获胜！ – spender 2010-09-21 20:03:32

几个选项：

让你的ID的独特通过附加的越来越多（例如）。
使用新类作为您感兴趣的行的指示符，然后使用“.notificationID”样式选择器附加fadeOut。

来源

2010-09-21 19:55:59 LVB

而不是使用的手柄动画/删除通知的ID，你可以简单地创建它作为自己的函数中的变量呼叫，从而给你一个方法来删除它。事情是这样的：

document.triggerNotification = function(type, message) { 
    var notification = $("<div class='push-notification push-" + type + "'>" + message + "</div>"); 
    jQuery(document.body).append(notification); 

    setTimeout(function() { 
     notification.fadeOut(1200, function() { 
      notification.remove(); 
     }) 
    }, 1500); 
};

另外，我觉得在这种情况下setTimeout比.delay()更合适。虽然它们都可以工作，但.delay()旨在用于排列多个动画。在这种情况下，setTimeout就足够了，因为你只调用一个动画。在这里看到的文档：http://api.jquery.com/delay/

最后，这里是代码的工作演示，我提供：http://jsfiddle.net/WqwsN/

您可以通过点击该按钮，只要你喜欢，你可以得到尽可能多的通知看，他们会按照它们添加的顺序淡出。

来源

2010-09-21 20:12:10 Ender

重复JS函数的最佳方法

回答

相关问题