按顺序运行Js代码

Question

我有来自Lazy Line Painter的这个JS代码，我试图让它按顺序运行。我尝试过不同的方法，但没有一种方法可行。有人可以告诉我，我可以按顺序运行这段代码。

代码：

$(document).ready(function(){ 
 $('#SEO_seo').lazylinepainter( 
 {
    "svgData": pathObj8,
    "strokeWidth": 2,
    "strokeColor": "black"
}).lazylinepainter('paint'); 

$('#SEO_internet').lazylinepainter( 
 {
    "svgData": pathObj6,
    "strokeWidth": 2,
    "strokeColor": "#2b357a"
}).lazylinepainter('paint'); 

$('#SEO_optmization').lazylinepainter( 
 {
    "svgData": pathObj5,
    "strokeWidth": 2,
    "strokeColor": "#3999b2"
}).lazylinepainter('paint'); 

});

 $(document).ready(function(){ 
 $('#SEO_marketing').lazylinepainter( 
 {
    "svgData": pathObj3,
    "strokeWidth": 2,
    "strokeColor": "#35a245"
}).lazylinepainter('paint'); 
 });
 $(document).ready(function(){ 
 $('#SEO_html').lazylinepainter( 
 {
    "svgData": pathObj4,
    "strokeWidth": 2,
    "strokeColor": "#075e33"
}).lazylinepainter('paint'); 
 });
 $(document).ready(function(){ 
 $('#SEO_web').lazylinepainter( 
 {
    "svgData": pathObj1,
    "strokeWidth": 2,
    "strokeColor": "#b51d2a"
}).lazylinepainter('paint'); 
 });
 $(document).ready(function(){ 
 $('#SEO_mobile_blog').lazylinepainter( 
 {
    "svgData": pathObj2,
    "strokeWidth": 2,
    "strokeColor": "#da5125"
}).lazylinepainter('paint'); 
 });

 $(document).ready(function(){ 
 $('#SEO_rank').lazylinepainter( 
 {
    "svgData": pathObj7,
    "strokeWidth": 2,
    "strokeColor": "#8b2477"
}).lazylinepainter('paint'); 
 });
  $(document).ready(function(){ 
 $('#SEO_design').lazylinepainter( 
 {
    "svgData": pathObj,
    "strokeWidth": 2,
    "strokeColor": "#cf1c53"
}).lazylinepainter('paint'); 
 });

Answer 1

使用Lazy Line Painter的回调功能，如下所示：

$(document).ready(function(){

    /* Define all the callbacks */

    var function8 = function(){ 
        $('#SEO_design').lazylinepainter( 
        {
            "svgData": pathObj,
            "strokeWidth": 2,
            "strokeColor": "#cf1c53"
        }).lazylinepainter('paint'); 
    };

    var function7 = function(){ 
        $('#SEO_rank').lazylinepainter( 
        {
            "svgData": pathObj7,
            "strokeWidth": 2,
            "strokeColor": "#8b2477",
            "onComplete" : function8 //Using the callback
        }).lazylinepainter('paint'); 
    };


    var function6 = function(){ 
        $('#SEO_mobile_blog').lazylinepainter( 
        {
            "svgData": pathObj2,
            "strokeWidth": 2,
            "strokeColor": "#da5125",
            "onComplete" : function7 //Using the callback
        }).lazylinepainter('paint'); 
    };

    var function5 = function(){
        $('#SEO_web').lazylinepainter({
            "svgData": pathObj1,
            "strokeWidth": 2,
            "strokeColor": "#b51d2a",
            "onComplete" : function6 //Using the callback
        }).lazylinepainter('paint'); 
    };

    var function4 = function() {
        +$('#SEO_html').lazylinepainter({
            "svgData": pathObj4,
            "strokeWidth": 2,
            "strokeColor": "#075e33",
            "onComplete" : function5 //Using the callback
        }).lazylinepainter('paint'); 
    };

    var function3 = function() {
        $('#SEO_marketing').lazylinepainter({
            "svgData": pathObj3,
            "strokeWidth": 2,
            "strokeColor": "#35a245",
            "onComplete" : function4 //Using the callback
        }).lazylinepainter('paint'); 
    };

    var function2 = function() {
        $('#SEO_optmization').lazylinepainter({
            "svgData": pathObj5,
            "strokeWidth": 2,
            "strokeColor": "#3999b2",
            "onComplete" : function3 //Using the callback
        }).lazylinepainter('paint'); 
    };

    var function1 = function() {
        $('#SEO_internet').lazylinepainter( {
            "svgData": pathObj6,
            "strokeWidth": 2,
            "strokeColor": "#2b357a",
            "onComplete" : function2 //Using the callback
        }).lazylinepainter('paint'); 
    };

    $('#SEO_seo').lazylinepainter({
        "svgData": pathObj8,
        "strokeWidth": 2,
        "strokeColor": "black",
        "onComplete" : function1 //Using the callback
    }).lazylinepainter('paint'); 

});

希望它有所帮助！