javascript - 单击方法可同时启动所有内容

Question

我有一个按钮单击功能，它应该像普通的javascript功能一样运行并一一启动所有功能，但它一次启动所有功能。这就是 Date().getTime() 函数在控制台中显示的内容。那么如何让它不是同时启动，而是一个一个启动呢？

$('#slider-menu li:last-child a').click(function(e) {
    console.log("1# " + Math.round(new Date().getTime() / 1000));
    e.preventDefault();
    console.log("2# " + Math.round(new Date().getTime() / 1000));

    $('#slider-menu .span12 li').removeClass("active");
    console.log("3# " + Math.round(new Date().getTime() / 1000));

    $('#slider-menu li:last-child').addClass("active");
    console.log("4# " + Math.round(new Date().getTime() / 1000));

    $('.trikampis').remove();
    console.log("5# " + Math.round(new Date().getTime() / 1000));

    var ilgis3 = $('#slider-menu .active').width() / 2;
    console.log("6# " + Math.round(new Date().getTime() / 1000));

    $(this).after("<div class='trikampis'></div>");
    console.log("7# " + Math.round(new Date().getTime() / 1000));

    $('#slider-menu .trikampis').css("border-left-width", ilgis3 + "px");
    console.log("8# " + Math.round(new Date().getTime() / 1000));

    $('#slider-menu .trikampis').css("border-right-width", ilgis3 + "px");
    console.log("9# " + Math.round(new Date().getTime() / 1000));

    $('#slider-menu ul').css("border-bottom-color", $('#slider-menu li.active a').css("background"));
    console.log("10# " + Math.round(new Date().getTime() / 1000));

    if ($('.slider-1').length !== 0) {
        $('.slider-1').addClass("slider-1-a");
        $('.slider-1').removeClass("slider-1");
        console.log("11# " + Math.round(new Date().getTime() / 1000));

    }
    if ($('.slider-2').length !== 0) {
        $('.slider-2').addClass("slider-2-a");
        $('.slider-2').removeClass("slider-2");
        console.log("11# " + Math.round(new Date().getTime() / 1000));

    }
    if ($('.slider-3-a').length !== 0) {
        $('.slider-3-a').addClass("slider-3");
        $('.slider-3-a').removeClass("slider-3-a");
        console.log("11# " + Math.round(new Date().getTime() / 1000));

    }
    $('.slider').hide();
    console.log("12# " + Math.round(new Date().getTime() / 1000));

    $("#preloader").show(); // will fade out the white DIV that covers the website.
    console.log("13# " + Math.round(new Date().getTime() / 1000));

    $("#status").show(); // will first fade out the loading animation
    console.log("14# " + Math.round(new Date().getTime() / 1000));

    $('.slider').load('/we-have-puppies #product-slideshow');
    console.log("15# " + Math.round(new Date().getTime() / 1000));

    $.getScript('http://bisonai.infoaleja.lt/wp-content/themes/bisonai/js/slideris.js');
    console.log("16# " + Math.round(new Date().getTime() / 1000));

    $('.pagr-info-blokas h3 a').css("color", $('#slider-menu li.active a').css("background"));

    console.log("17# " + Math.round(new Date().getTime() / 1000));

    $("#status").fadeOut(); // will first fade out the loading animation
    $("#preloader").delay(700).fadeOut("slow"); // will fade out the white DIV that covers the website.
    $('.slider').fadeIn();
    console.log("18# " + Math.round(new Date().getTime() / 1000));

});

Answer 1

您正在寻找 console.time(PERIOD_NAME)

像这样使用它:

console.time('t')
if ($('.slider-1').length !== 0) {
        $('.slider-1').addClass("slider-1-a");
        $('.slider-1').removeClass("slider-1");
        console.log("11# " + Math.round(new Date().getTime() / 1000));}
console.timeEnd('t')
//Outputs t: 0.010ms