JQuery Klick 1 tut nichts

Question

Ich habe das Gefühl, dass etwas mit meiner for-Schleife nicht stimmt. Wenn mein Webseiten-Event das erste Mal aktiviert wird, bekomme ich keine Antwort. Es funktioniert jedes Mal danach wie beabsichtigt. Ich habe versucht, die Zahlen in der for-Schleife nach Fehlern zu suchen, aber soweit, was ich versucht habe. Es funktioniert am besten so wie es ist.

Für die volle App: 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

Ihre restlichen Code lief vor Ihrer Ajax den Wert drücken Variable zu verweisen.

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

Sie können entweder Ihre Seite Rendering-Code innerhalb der Ajax setzen oder einige Tipps verwenden, um die Rederer synchron

$("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; 
     }; 
     }; 
    });  
    });