Fatal编程技术网
  • javascript/
  • Javascript链接方法而不将其包装

Javascript链接方法而不将其包装

javascript

Javascript链接方法而不将其包装,javascript,Javascript,我需要链接方法，检查： 一,。 二,。 三,。 四,。 但这些问题与我的不同。以下是我的情况： 我有两种方法：A（），B（）。B（）必须在A（）完成后执行 这是我的密码： index.html $(document).ready(function(){ function A(){ $.ajax({ type: 'GET', url: "https://rickandmortyapi.com/api/character/", dat

我需要链接方法，检查：

一,。

二,。

三,。

四,。

但这些问题与我的不同。以下是我的情况：

我有两种方法：A（），B（）。B（）必须在A（）完成后执行

这是我的密码：

index.html

$(document).ready(function(){

function A(){
    $.ajax({
        type: 'GET',
        url: "https://rickandmortyapi.com/api/character/",
        dataType: "json",
        success: function (data) {
            var results = data.results;

            $.map(results, function(v, i){
                var card = `
                <div class="card" id="${v.id}">
                <img class="card-img-top" src="${v.image}" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">${v.name}</h5>
                  <p class="card-text">${v.gender}</p>
                  <p class="card-epi">...</p>
                </div>
              </div>
                `;

                $(".movies").append(card);
            });


        },
        error: function(data){

        }
    });
}

function B(){
    $.ajax({
        type: 'GET',
        url: "https://rickandmortyapi.com/api/episode",
        dataType: "json",
        success: function (data) {
            var results = data.results;

            $.map(results, function(v, i){
                $("#"+v.id).find(".card-epi").text(v.name)
            });
        },
        error: function(data){
            console.log("errors in B()", data);
        }
    });
}

new Promise(function(resolve, reject){
    resolve(A);
}).then(function(result){
    B();
});
// A();
// B();
});

$（文档）.ready（函数（）{
函数A（）{
$.ajax({
键入：“GET”，
url:“https://rickandmortyapi.com/api/character/",
数据类型：“json”，
成功：功能（数据）{
var结果=data.results；
$.map（结果、功能（v、i）{
var卡=`
${v.name}

${v.gender}



`;
$（“.movies”）。附加（卡片）；
});
},
错误：函数（数据）{
}
});
}
函数B（）{
$.ajax({
键入：“GET”，
url:“https://rickandmortyapi.com/api/episode",
数据类型：“json”，
成功：功能（数据）{
var结果=data.results；
$.map（结果、功能（v、i）{
$（“#”+v.id）.find（“.card epi”）.text（v.name）
});
},
错误：函数（数据）{
log（“B（）中的错误”，数据）；
}
});
}
新承诺（功能（解决、拒绝）{
决议（A）；
}).然后（函数（结果）{
B（）；
});
//A（）；
//B（）；
});
index.html

      <!DOCTYPE html>
          <html>

          <head>
              <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
          </head>

          <body>
              <div class="movies card-columns">

              </div>
          </body>
          <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
          <script src="movies.js"></script>

          </html>
我试着用承诺，但它对我不起作用

以下是JSFidlde：

只需在A（）的成功处理程序中调用B（）

只需在A（）的成功处理程序中调用B（）

您就快到了。只需从函数
A
返回
$.ajax（…）
，它的工作方式如下：

function A() {
  return $.ajax( ... );
}

A()
  .then(function() {
    B();
  });

$.ajax（…）
已经在jQuery中公开了类似promise的API。因此，您应该能够直接对
的结果应用
。然后（）。只需从函数
A
返回
$.ajax（…）
，它的工作方式如下：


function A() {
  return $.ajax( ... );
}

A()
  .then(function() {
    B();
  });



$.ajax（…）
已经在jQuery中公开了类似promise的API。因此，您应该能够直接对
的结果应用
。然后（）


$(document).ready(function () {
  function A() {
    var def = $.Deferred();
    $.ajax({
      type: 'GET',
      url: "https://rickandmortyapi.com/api/character/",
      dataType: "json",
      success: function (data) {
        var results = data.results;

        $.map(results, function (v, i) {
          var card = `
                  <div class="card" id="${v.id}">
                  <img class="card-img-top" src="${v.image}" alt="Card image cap">
                  <div class="card-body">
                    <h5 class="card-title">${v.name}</h5>
                    <p class="card-text">${v.gender}</p>
                    <p class="card-epi">...</p>
                  </div>
                </div>
                  `;

          $(".movies").append(card);
          def.resolve();
        });
      },
      error: function (data) {

      }
    });
    return def.promise();
  }

  function B() {
    var def = $.Deferred();
    $.ajax({
      type: 'GET',
      url: "https://rickandmortyapi.com/api/episode",
      dataType: "json",
      success: function (data) {
        var results = data.results;

        $.map(results, function (v, i) {
          $("#" + v.id).find(".card-epi").text(v.name)
        });
        def.resolve();
      },
      error: function (data) {
        console.log("errors in B()", data);
      }
    });
    return def.promise();
  }

  A().then(function() {
    console.log('A executed');
    return B();
  }).then(function() {
    console.lob('B executed');
  });
});



$（文档）.ready（函数（）{
函数A（）{
var def=$.Deferred（）；
$.ajax({
键入：“GET”，
url:“https://rickandmortyapi.com/api/character/",
数据类型：“json”，
成功：功能（数据）{
var结果=data.results；
$.map（结果、功能（v、i）{
var卡=`
${v.name}

${v.gender}



`;
$（“.movies”）。附加（卡片）；
def.resolve（）；
});
},
错误：函数（数据）{
}
});
返回def.promise（）；
}
函数B（）{
var def=$.Deferred（）；
$.ajax({
键入：“GET”，
url:“https://rickandmortyapi.com/api/episode",
数据类型：“json”，
成功：功能（数据）{
var结果=data.results；
$.map（结果、功能（v、i）{
$（“#”+v.id）.find（“.card epi”）.text（v.name）
});
def.resolve（）；
},
错误：函数（数据）{
log（“B（）中的错误”，数据）；
}
});
返回def.promise（）；
}
A（）。然后（函数（）{
log（'A executed'）；
返回B（）；
}).然后（函数（）{
控制台。lob（“B已执行”）；
});
});

试试看：


$(document).ready(function () {
  function A() {
    var def = $.Deferred();
    $.ajax({
      type: 'GET',
      url: "https://rickandmortyapi.com/api/character/",
      dataType: "json",
      success: function (data) {
        var results = data.results;

        $.map(results, function (v, i) {
          var card = `
                  <div class="card" id="${v.id}">
                  <img class="card-img-top" src="${v.image}" alt="Card image cap">
                  <div class="card-body">
                    <h5 class="card-title">${v.name}</h5>
                    <p class="card-text">${v.gender}</p>
                    <p class="card-epi">...</p>
                  </div>
                </div>
                  `;

          $(".movies").append(card);
          def.resolve();
        });
      },
      error: function (data) {

      }
    });
    return def.promise();
  }

  function B() {
    var def = $.Deferred();
    $.ajax({
      type: 'GET',
      url: "https://rickandmortyapi.com/api/episode",
      dataType: "json",
      success: function (data) {
        var results = data.results;

        $.map(results, function (v, i) {
          $("#" + v.id).find(".card-epi").text(v.name)
        });
        def.resolve();
      },
      error: function (data) {
        console.log("errors in B()", data);
      }
    });
    return def.promise();
  }

  A().then(function() {
    console.log('A executed');
    return B();
  }).then(function() {
    console.lob('B executed');
  });
});



$（文档）.ready（函数（）{
函数A（）{
var def=$.Deferred（）；
$.ajax({
键入：“GET”，
url:“https://rickandmortyapi.com/api/character/",
数据类型：“json”，
成功：功能（数据）{
var结果=data.results；
$.map（结果、功能（v、i）{
var卡=`
${v.name}

${v.gender}



`;
$（“.movies”）。附加（卡片）；
def.resolve（）；
});
},
错误：函数（数据）{
}
});
返回def.promise（）；
}
函数B（）{
var def=$.Deferred（）；
$.ajax({
键入：“GET”，
url:“https://rickandmortyapi.com/api/episode",
数据类型：“json”，
成功：功能（数据）{
var结果=data.results；
$.map（结果、功能（v、i）{
$（“#”+v.id）.find（“.card epi”）.text（v.name）
});
def.resolve（）；
},
错误：函数（数据）{
log（“B（）中的错误”，数据）；
}
});
返回def.promise（）；
}
A（）。然后（函数（）{
log（'A executed'）；
返回B（）；
}).然后（函数（）{
控制台。lob（“B已执行”）；
});
});

对不起，我的问题没有说清楚。事实上，在$.map（results，function（v，i）{var card=..一侧，我有另一个ajax调用。由于javascript ajax调用的异步特性，我无法将B（）放入A（）的成功处理程序中。对不起，我没有明确说明我的问题。事实上，在$.map（results，function（v，i））一侧{var card=..我有另一个ajax调用。由于javascript ajax调用的异步特性，我无法将B（）放在A（）的成功处理程序中。好的，我不知道jQuery中有Deferred（）。请记住：）好的，我不知道jQuery中有Deferred（）。请记住：）不，
然后
会很有趣