将重复的jquery代码表达为循环

Question

最近我正在使用类似登录和注册表单的表单的用户体验，只是为了灵感。我只是以行格式编码，没有应用任何逻辑来缩短它。

以下是我编码的方式：

$('.form-content.minimized a').click(function(event) {
    event.preventDefault();
    $('.form-content.minimized').addClass('first_step', 
            setTimeout(function(){
                $('.form-content.minimized').addClass('second_step', 
                        setTimeout(function(){
                            $('.form-content.minimized').addClass('third_step', 
                                    setTimeout(function(){
                                        $('.form-content.minimized').addClass('fourth_step',
                                                setTimeout(function(){
                                                    $('.form-content.minimized').addClass('fifth_step ' + fifth_step , 
                                                            setTimeout(function(){
                                                                $('.form-content.minimized').addClass('opened');
                                                            }, 100)
                                                        )
                                                }, 600)
                                            );
                                    }, 400)
                                );
                        }, 200)
                    );
            }, 200)
        );

});

在这里我们可以看到发生了一些像楼梯一样的步伐。 first_step，second_step ..... 并且每个步骤之间也会发生时间间隔。

如果我们在循环中执行类似i=0，i++，i<= something的操作，那么我认为它会更具可读性和可维护性。

Answer 1

如果你想要做的只是以不同的超时间隔添加类，我会以完全不同的方式构造代码。

首先，我将设置一个包含所有类/超时的数组。

然后，我会迭代它们，设置超时。

示例：

// Classes is a collection (an array of objects)
var classes = [
    { name: 'first_step',
      time: 2000 // this needs to be the CUMULATIVE time
    },
    { name: 'second_step',
      time: 4000
    },
    { name: 'third_step',
      time: 6000
    }
];

$.each(classes, function(i, c) {
    // Here 'c' contains the object, with properties 'name' and 'time'
    setTimeout(function() {
        $('.form-content.minimized').addClass(c.name);
    }, c.time);
});

正如其他人所指出的，addClass不接受第二个参数，因此不需要嵌套。

这是Working Fiddle