Функция Javascript не выполняется, если оператор

Question

У меня есть код JavaScript, предназначенный для получения данных JSON с веб-сайта и записи текстов на изображении всякий раз, когда собранные данные соответствуют данным в инструкции if. Однако он не работает, и я не уверен в этом. Я попытался выполнить context.drawText без операторов if, и он работает, но в тот момент, когда я положил его в оператор if, код не рисовал. Пожалуйста помоги.

<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

Привет у вас, чтобы переместить DrawText внутри функции $ .get как только у меня результат только и может проверить значение потому, что DrawText вы звоните до Получить функции, так что значение результата не определено,

пожалуйста, проверьте этот код

JS

<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> 

для справки http://plnkr.co/edit/CpaawlQl9juho1BUO6b3?p=preview

Answer 2

Я обновил вызов $ .get иметь OnComplete событие: 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

положить $ .get в imageObj.onload и DrawScreen/DrawText в $ .get обратного вызова функция.