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
      });
    });

创建链接，但滑块不是。我创建了一个页面，其中使用JSON创建链接 not ，并且它工作正常。

我认为问题是因为getJSON方法是异步的，所以浏览器会尝试在将任何项添加到滑块之前创建滑块。首先，是这个问题？如果是这样，解决它的最佳方法是什么？

Answer 1

你无法使这种同步。使用ES6，你可以＆＃34;假的＆＃34;等待使用async和await的异步操作，但它所执行的操作与您需要执行的操作基本相同。

您需要将$('.slider').slick(...代码粘贴到$.getJSON回调中。在进行异步回调之前，不应初始化滑块。

Answer 2

不确定这是否对您的具体问题有帮助，但您确实可以进行同步JSON请求。

异步请求将是（在vanilla JS中）：

var request = new XMLHttpRequest();
request.open("GET", "/bar/foo.txt", true); // Note the `true` here.
request.send(null);                       // When set to true, the request
                                         // will be asynchronous.
if (request.status === 200) {
  console.log("ok");
}

同步请求将是：

var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
request.send(null);

if (request.status === 200) {
  console.log("ok");
}

这里有一些文档： https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests

如何强制同步执行getJSON？

2 个答案: