Question

我对JS比较陌生，但我理解一些基本原则。但是，这会导致相当低效和繁琐的代码。

我想知道是否有更有效的版本，基本上就是这个

*

function gz2() {
    $('#GZ2').show(500);
    setTimeout(gz3, 2000);
}
function gz3() {
    $('#GZ3').show(500);
    setTimeout(gz4, 2000);
}
function gz4() {
    $('#GZ4').show(500);
    setTimeout(gz5, 2000);
}
function gz5() {
    $('#GZ5').fadeIn(200);
    setTimeout(gz6, 1000);
}
function gz6() {
    $('#GZ6').fadeIn(200);
    setTimeout(gReturn, 2000);
}
function gReturn(){
    $('.gammaZ').hide();
    setTimeout(gamma1, 0)
}

*

要清楚，这些都设置为＆＃34;显示：无＆＃34;在CSS中，通过JavaScript可以看到

是否有代码按顺序显示这些元素而不必单独调用每个元素？特别是如果所有人的可见效果（show，fadeIn，slideDown）相同？就像＆＃34;所有这一课一样，以两秒的间隔显示，直到它们全部可见为止＃34;

我问，因为这有效...＆＃34;罚款＆＃34;就目前而言，但我最近在我的代码中达到了一个重点，我现在必须使用我目前对JavaScript的知识来完成其中的大约40个，这不是我觉得舒服的事情。这不仅仅是因为它单调，而且因为我确信这是一种更容易实现的方式，而我只是没有得到它。

感谢任何帮助！

Answer 1

您可以使用回调函数序列

$('#GZ2').show(500, function(){
    $('#GZ3').show(500, function(){
        $('#GZ4').show(500, function(){
            $('#GZ5').fadeIn(200, function(){
                $('#GZ6').fadeIn(200, function(){
                    $('.gammaZ').hide();
                });
            });
        });
    });
});

Answer 2

您可以分解出一个接受呼叫和延迟列表的函数run：

function run(L) {
    var i = 0;
    function step() {
        L[i][0]();
        if (i < L.length-1) {
            setTimeout(step, L[i++][1]);
        }
    }
    step();
 }

然后你就可以使用它：

run([[function(){$('#GZ2').show(500);}, 2000],
     [function(){$('#GZ3').show(500);}, 2000],
     [function(){$('#GZ4').show(500);}, 2000],
     [function(){$('#GZ5').fadeIn(200);}, 1000],
     [function(){$('#GZ6').fadeIn(200);}, 2000],
     [function(){$('.gammaZ').hide();}, 0],
     [gamma1]]);

Answer 3

由于你使用的是jQuery，你可以在show函数上使用闭包，检查出来......

$('#gz1').show(500, function() {
    $('#gz2').show(2000, function() {
        $('#gz3').show(2000, function() {
            $('#gz4').show(1000, function() {
                $('#gz5').show(1000); //end of the road.
            });
        });
    });
});

https://jsfiddle.net/toxjb9xh/

Answer 4

正如@jfriend00在我之前的回答中所说，你可以在回调函数中使用超时函数。

/project
  /packages
    /files
      __init__.py
      fileChecker.py
    /hasher
      __init__.py
      fileHash.py
    mainProject.py
    /test

Answer 5

如果这里的目标是创建一些可重用的代码，您可以将其用于许多不同的场景（因为您说“我必须连续执行其中的40个”），那么您通常需要重复代码并将其放在一个可重用的函数中，该函数接受参数，然后将函数传递给数据表。

然后，您可以通过向其传递不同的数据表来重用其他地方的逻辑。这可能是一个更初始的代码，但更加灵活，维护通常可以通过编辑数据表来完成，或者可以通过创建新的数据表并再次调用主函数来编码新的用法。数据：

function showNext(selector, method, timing, delay, callback) {
    $(selector)[method](timing);
    setTimeout(callback, delay);
}

function runItems(list, doneCallback) {
    var cntr = 0;

    function next() {
        var obj;
        if (cntr < list.length) {
            obj = list[cntr++];
            showNext(obj.selector, obj.method, obj.timing, obj.delay, next);
        } else {
            doneCallback();
        }
    }
    next();
}

var items = [
    {selector: '#GZ2', method: 'show', timing: 500, delay: 2000},
    {selector: '#GZ3', method: 'show', timing: 500, delay: 2000},
    {selector: '#GZ4', method: 'show', timing: 500, delay: 2000},
    {selector: '#GZ5', method: 'fadeIn', timing: 200, delay: 1000},
    {selector: '#GZ6', method: 'fadeIn', timing: 200, delay: 1000},
    {selector: '.gammaZ', method: 'hide', timing: 0, delay: 0},
];

runItems(items, gReturn);

如果为代码中的各种表元素创建默认值，则可以删除表中的某些数据。例如，您可以将默认方法设为'show'，默认时间为500，默认延迟为2000，然后您可以跳过表中默认的所有属性值。

这个javascript函数和show命令示例的更高效版本

5 个答案: