如何让函数一个接一个地工作（其中包含 ajax 请求）

Question

我有 2 个功能：第一个在页面上加载 svg，第二个更改某些 <path> 中某些 svg 的颜色。

这个函数看起来像：

get_svg_part(category,position,part_name); -- 包含 ajax

svg_part_color(category,position,color,parameter); -- 需要在get_svg_part()

之后执行

我遇到过只加载 svg 而不更改颜色的情况，在另一些情况下我需要加载 svg 并更改其中的情侣颜色。这就是为什么我没有在 ajax 中使用 success 或 complite 的原因。我还需要在页面加载时执行此操作，所以我将所有（2 个函数和调用）放在 jQuery(document).ready() 之前（如果需要此信息）。

我尝试通过 $.when 和 .then 来完成，但这没有效果：

$.when(get_svg_part('accent','bottom',' U+1F60A')).then(svg_part_color('accent','bottom','#FF7892',0));

也许我也需要在某种意义上使 svg_part_color(); 异步？如果是，那又如何？

问题：如何让函数一个接一个地工作（包含ajax请求）？

太棒了，如果这会像这样工作的话：

get_svg_part('accent','bottom',' U+1F60A');
svg_part_color('accent','bottom','#FF7892',0);

$.when(get_svg_part()).then(svg_part_color()); // just set a rule and not execute function here

// or maybe put this rule in svg_part_color() function

更新： get_svg_part代码：

function get_svg_part(cathegory,position,part_name){ 
   $.ajax({
      url: "img/icons/parts/"+cathegory+"/"+position+"/"+part_name+".svg",
      type: 'GET',
      dataType: 'html',
      success: function( data ){
       let rate_block_rated = movie_block.find('.movie_rating.rated'); //rate_block_rated
       let svg_symbol = rate_block_rated.find(".composite_rate svg ."+cathegory+"."+position);
       // prepend (insert) data to svg_symbol (accent bottom),
       // then find inserted svg, and delete svg tag (unwrap path)
       svg_symbol.prepend(data).find('svg').children().unwrap();

      }
    });     
};

Answer 1

只要你的第一个函数 returns 是一个与 ajax 相关的 promise，那么你就可以执行如下操作：

function get_svg_part(a, b, c){  

    // return the jQuery `$.ajax()`, `$.post()`, `$.getJSON()` 
    // or whatever method you are using    
    return $.ajax({/* options */})

}

用法：

get_svg_part().then(function() { 
   svg_part_color('accent','bottom','#FF7892',0);
})

如何让函数一个接一个地工作（其中包含 ajax 请求）

How to make function work after another (which contains ajax request)

ajax

jquery

svg

.when

asynchronous-javascript