Question

看起来我可能会以一种奇怪的方式做事，但我想在舞台上构建我的代码，这样我才能理解发生了什么。延迟后，以下内容会淡出元素。

        $('.image-list .bottom').each(function(i){
                $(this).delay(1000).fadeOut(500);
        });

我希望在发生这种情况之前添加1秒的延迟但是下面的代码根本没有发生任何事情。

        $('.image-list .bottom').each(function(i){  
            setTimeout(function(){  
                $(this).delay(1000).fadeOut(500);
            },1000);    
        });

我知道我可以改变annimation中的延迟，并且在这个阶段每个函数都是不必要的，但是我想要构建更复杂的东西并且了解这个结构的基础知识。

Answer 1

回调方法中的

this未指向它正在循环的bottom元素。

一种解决方案是使用闭包变量

    $('.image-list .bottom').each(function(i){  
        var self = this;
        setTimeout(function(){  
            $(self ).delay(1000).fadeOut(500);
        },1000);    
    });

另一种方法是使用$.proxy()传递自定义执行上下文

    $('.image-list .bottom').each(function(i){  
        setTimeout($.proxy(function(){  
            $(self ).delay(1000).fadeOut(500);
        }, this),1000);    
    });

Answer 2

因为你实际上是在同一时间运行stTimeout（。这里非常快），所以你应该手动安排，试试这个：（1000 - ＆gt; 1000 * i），

此外，您还需要将对象缓存在setTimeout函数

之外

$('.image-list .bottom').each(function(i){  
            var $item = $(this);
            setTimeout(function(){  
                $item.delay(1000).fadeOut(500);
            },1000*i);    
        });

.each中的setTimeout不起作用

2 个答案: