这个JavaScript函数和显示命令示例的更有效版本

More efficient version of this example of javascript function and show commands

本文关键字：有效 版本 命令 JavaScript 函数 显示 这个      更新时间：2023-09-26

我对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)
}

*

需要明确的是，这些在CSS中都设置为"display：none"，并通过JavaScript可见

。

是否有代码可以按顺序显示这些元素，而不必单独调用每个元素？特别是如果所有这些的可见性效果(显示、淡入、向下滑动(都相同？就像"所有这些类，以两秒的间隔显示，直到它们都可见">

我问是因为这已经奏效了...现在"很好"，但是我最近在我的代码中达到了一个点，以我目前的JavaScript知识，我必须连续做大约40个这样的事情，这不是我觉得舒服的事情，不仅因为它单调，而且因为我相信有一种更简单的方法可以做到这一点，我只是没有得到。

任何帮助不胜感激！

您可以使用回调函数序列

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

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

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

您可以分解一个接受调用和延迟列表的函数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]]);

既然你使用的是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/

如果这里的目标是创建一些可重用的代码，你可以用于许多不同的场景，比如(因为你说"我必须连续做大约 40 个这样的"(，那么你通常希望获取重复的代码并将其放入一个可重用的函数中，该函数接受参数，然后向函数传递数据表。

然后，只需向其传递不同的数据表，即可在其他位置重用该逻辑。 这可能是更多的初始代码，但更具可重复性，并且通常可以通过编辑数据表来完成维护，或者可以通过创建一个新的数据表并再次调用 master 函数将该数据传递给它来编码新的用途：

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默认延迟，然后可以跳过表中作为默认值的所有属性。

相关文章：