Question

我正在尝试弹出通知，每次弹出都是在ajax获取数据后动态生成的。弹出每个将在淡出之前有10秒的时间限制。像你在左下角的Facebook通知上看到的东西。每个弹出窗口将根据添加的时间和时间限制隐藏。

以下是一个示例代码：

function hidePop(obj){
  $(obj).hide();
}

function newpopup(data){
    $('#notifications').prepend('<li class="new" style="display:none;">'+data+'</li>');
    $('.new').fadeIn(200, function(){
       var $this = $(this);
       $(this).removeClass('new');
       setTimeout(function(){
          hidePop($this)
       }, 10000);
    });
}

正如您在上面所看到的，我的ajax调用将调用带有数据的newpopup。一旦完全淡入，setTimeout函数就会运行。然而，这有效，在添加了几个li之后，那些新的lis一旦显示就会保持隐藏状态。注意：一旦完成所有内容，我将删除class new，因为new将用于最新的传入弹出窗口。

我认为setTimeOut要么没有停止，要么瞄准所有的lis。

我的方法是问题还是有更好的解决方案？

Answer 1

在setTimeout中的匿名函数体中，$this被覆盖。试试这个：

function newpopup(data){
    $('#notifications').prepend('<li class="new" style="display:none;">'+data+'</li>');
    $('.new').fadeIn(200, function(){
       var $this = $(this);
       $(this).removeClass('new');
       var thatPopup = $this;
       setTimeout(function(){
          hidePop(thatPopup)
       }, 5000);
    });
}

Answer 2

我不建议简单地将<li>标记作为表示类的字符串，然后使用jQuery选择类，我建议使用DOM创建<li>元素并保存对它的引用像这样：

function hidePop(obj){
  obj.hide(); //obj parameter already wrapped by jquery, no need to do it again
}

function newpopup(data){
    var newLi = $(document.createElement("li")); //createElement then wrap jQuery around it
    newLi.html(data).css("display", "none"); //jQuery set innerHTML and CSS

    $('#notifications').prepend(newLi); //Prepend to list

    newLi.fadeIn(200, function() { //Select this and only this li element
       setTimeout(function(){
          hidePop(newLi); //Closure; reference to the same "this and only this li"
       }, 10000); //10s
    });
}

将setTimeOut绑定到具有特定元素的某个函数

2 个答案: