Javascript-Funktion nicht ausgeführt, wenn Anweisung

Question

Ich habe einen JavaScript-Code entwickelt, um JSON-Daten von einer Website zu erhalten und Texte auf ein Bild schreiben, wenn die gesammelten Daten mit den Daten in einer if-Anweisung übereinstimmt. Es funktioniert jedoch nicht und ich bin mir der Ursache nicht sicher. Ich habe versucht, die context.drawText ohne die if Aussagen auszuführen, und es funktioniert, aber in dem Moment, in dem ich es in eine if-Anweisung legte, würde der Code nicht zeichnen. Bitte helfen Sie.

<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script> 
<canvas id="myCanvas" width="900" height="800"></canvas> 
<script> 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var imageObj = new Image(); 
    imageObj.onload = function() 
    { 
     DrawScreen(); 
     DrawText(); 

    }; 

    $.get(
     "https://dweet.io/get/latest/dweet/for/james", 
     function(data) 
     { 
      result = data['with'][0]['thing']; 
      //show what is inside result 
      //document.write(result); 
     } 
    ); 
    imageObj.src = 'https://s31.postimg.org/v85n3kvez/dummyfp.jpg'; 

    function DrawScreen() 
    { 
     context.drawImage(imageObj, 10, 10); 
     document.write(result); 
    } 

    function DrawText() 
    { 
     context.fillStyle = "green"; 
     context.font = "18px sans-serif"; 
     context.textBaseline = 'top'; 
     if (result == '' || result == null) 
     { 
      context.fillText('noooo', 430, 100); 
     } 
     if (result == 'james') 
     { 
      context.fillText('james', 430, 100); 
     } 
     else 
     { 
      context.fillText('thisisnt', 430, 100); 
     } 
    } 
</script> 

JSFiddle

Answer 1

Hallo u haben Ihre DrawText innerhalb der $ .get Funktion zu bewegen, wenn u das Ergebnis nur bekommen u kann den Wert überprüfen, weil die drawText Sie vor der Get-Funktion, so dass der Ergebniswert fordern nicht definiert ist,

bitte diesen Code

JS überprüfen

<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script> 
<canvas id="myCanvas" width="900" height="800"></canvas> 
<script> 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var imageObj = new Image(); 
    var result; 
    imageObj.onload = function() 
    { 
    DrawScreen(); 


    }; 

    $.get(
     "https://dweet.io/get/latest/dweet/for/james", 
     function(data) 
     { 
      result = data['with'][0]['thing']; 
      DrawText(); 
     } 
    ); 
    imageObj.src = 'https://s31.postimg.org/v85n3kvez/dummyfp.jpg'; 

    function DrawScreen() 
    { 
     context.drawImage(imageObj, 10, 10); 
    } 

    function DrawText() 
    { 
     context.fillStyle = "green"; 
     context.font = "18px sans-serif"; 
     context.textBaseline = 'top'; 
     alert(result) 
     if (result == '' || result == null) 
     { 
      context.fillText('noooo', 430, 100); 
     } 
     if (result == 'james') 
     { 
      context.fillText('james', 430, 100); 
     } 
     else 
     { 
      context.fillText('thisisnt', 430, 100); 
     } 
    } 
</script> 

Referenz http://plnkr.co/edit/CpaawlQl9juho1BUO6b3?p=preview

Answer 2

ich den $ .get Aufruf aktualisiert, um ein onComplete Ereignis haben: JSFIDDLE

$.get({ 
    url: "https://dweet.io/get/latest/dweet/for/james", 
    success: function(data) 
    { 
     result = data['with'][0]['thing']; 
     //show what is inside result 
     //document.write(result); 
    }, 
    complete: function(){ 
     DrawText(); 
    } 
}); 

Answer 3

put $ .get in imageObj.onload und DrawScreen/DrawText in $ .get Rückruf Funktion.