jquery - .each 中的 setTimeout 确实有效

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);    
        });

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

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 （.each 在这里非常快），所以你应该手动调度，试试这个：（1000 --> 1000*i），

您还需要在 setTimeout 函数之外缓存对象

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