ajax调用完成后执行函数答案

【问题标题】：Execute function after ajax call finishedajax调用完成后执行函数
【发布时间】：2020-01-31 17:52:55
【问题描述】：

我知道，这在 SO（例如 here）上已被多次询问，但对我没有任何帮助。

我有一个通过 ajax 导入的 JSON。这会为一个光滑的滑块导入数据。所以 ajax 导入完成后应该初始化光滑的滑块。

我的代码：

  // Import Ticker
  $.ajax({
      url: '/de/data/data.json',
      type: 'GET',
      datatype: 'json'
  }).success(function (data) {
      for (var i = 0; i < data.length; i++) {
          var obj = data[i];
          $('section.ticker .slider').append(`
            <div class="slide">1</div>
            <div class="slide">2</div>
            <div class="slide">3</div>
          `)};

      $(document).on('ready', function() {
        $('.slider').slick({
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3
        });
      });

      // Error handler
      }).error(function (err) {
          console.log(err);
      })

我也试过了：

  }).success(function (data) {
      for (var i = 0; i < data.length; i++) {
          var obj = data[i];
          $('section.ticker .slider').append(`
            <div class="slide">1</div>
            ...
          `)};
      }.complete: function (data) {
        $('.slider').slick({
          infinite: ...
        });
      }).error(function (err) {
          console.log(err);
      })

或者这个：

$( document ).ajaxStop(function() {
  $('.slider').slick({
     infinite: ...
  });
});

【问题讨论】：

不确定，但我会从 $(document).on('ready' ... 开始，然后将 ajax 调用放入其中。然后，在 for 循环完成后，我将放置 $('.slider').slick( ... )
在第一个示例中，为什么选择在 ajax 调用的 success 中使用 $(document).on('ready', ...)？在循环附加 .slide 元素后，是否有理由不立即运行 .slick() 调用？

标签： javascript ajax

【解决方案1】：

请从$(document).on('ready',function(){}); 中删除光滑的初始化

你的代码看起来像

$.ajax({
      url: '/de/data/data.json',
      type: 'GET',
      datatype: 'json'
  }).success(function (data) {
      for (var i = 0; i < data.length; i++) {
          var obj = data[i];
          $('section.ticker .slider').append(`
            <div class="slide">1</div>
            <div class="slide">2</div>
            <div class="slide">3</div>
          `)};

        $('.slider').slick({
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3
        });

      // Error handler
      }).error(function (err) {
          console.log(err);
  })

【讨论】：