javascript - JQuery 点击 1 什么都不做

Question

我感觉我的 for 循环有问题。当我的网站事件第一次被激活时，我没有得到任何回应。此后每次都按预期工作。我已经尝试调整 for 循环中的数字以寻找错误，但就我所尝试的而言。它按原样运行效果最佳。

对于完整的应用程序:https://codepen.io/xcidis/full/KvKVZb/

var reference = [];

function random() {
  $.ajax({
      url: "https://api.forismatic.com/api/1.0/?",
      dataType: "jsonp",
      data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
      success: function(quote) {
        reference.push([quote.quoteText + "<br/><br/><br/><div align='right'>~" + quote.quoteAuthor + "</div>"]);
      }
  });
}

$("button").click(function(){
  random();
  for(i=0;i<4; i++){
    if(reference[reference.length-1] == undefined){continue}else{
    var boxes = $("<div id='boxes'></div>").html("<p>" + reference[reference.length-1] + "</p>");
  $('body').append(boxes);
      break;
    };
  };
});

Answer 1

您的其余代码在您的 ajax 将值推送到引用变量之前运行。

https://www.w3schools.com/xml/ajax_intro.asp

您可以将您的页面呈现代码放在 ajax 中，或者使用一些技巧来同步运行 rederer

$("button").click(function(){
  $.when(  $.ajax({
      url: "https://api.forismatic.com/api/1.0/?",
      dataType: "jsonp",
      data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
      success: function(quote) {
        reference.push([quote.quoteText + "<br/><br/><br/><div class='tweet' align='left'></div><div align='right'>~" + quote.quoteAuthor + "</div>"]);
      }
  })).then(function() {
      console.log(reference)
      for(i=0;i<4; i++){
        if(reference[reference.length-1] == undefined){continue}else{
        var boxes = $("<div id='boxes'></div>").html("<p>" + reference[reference.length-1] + "</p>");
      $('body').append(boxes);
          break;
        };
      };
    });    
  });