javascript - 如何强制同步执行getJSON？

Question

对于一个学校历史项目，我正在制作一个时间线网页 ( live here )。为了避免重复输入每个详细信息，我将它们放入电子表格中并将其导出为 JSON .

在导航中，我使用 Javascript 创建了标有事件年份的链接。

然后我想使用 slick.js(一个 jQuery 插件)将导航变成轮播，如上面链接的实时网站的/slick-test-static.html 所示。

我的代码:

$(document).ready(function(){
      $.getJSON("data.js", function(result){
        for (var i = 0; i < result.length; i++){
          var string = JSON.stringify(result[i]);
          var parsed = JSON.parse(string);

          $('.slider').append("<li><a href=\"#" + parsed.number + "\">" + parsed.year + "</a></li>");
        }
      });

      $('.slider').slick({
        slidesToShow: 8,
        slidesToScroll: 5,
        autoplay: true,
        autoplaySpeed: 3000
      });
    });

链接已创建，但 slider 未创建。我创建了一个页面，其中的链接是使用 JSON 创建的，而不，而且效果很好。

我认为问题是因为 getJSON 方法是异步的，因此浏览器会尝试在将任何项目添加到 slider 之前创建 slider 。首先，这是问题所在吗？如果是这样，修复它的最佳方法是什么？

Answer 1

您无法使其同步。使用 ES6，您可以使用 async 和 await 来“假装”等待异步操作，但它所做的基本上与您需要执行的操作相同。

您需要将 $('.slider').slick(... 代码粘贴到 $.getJSON 回调中。您不应该初始化 slider 直到进行异步回调。