Функция jQuery .click требует двух кликов?

Question

У меня есть функция jQuery, которая не выполняет весь код до второго щелчка. Он выходит за пределы $ .get и выполняет первый 'console.log (' hit ')', но он никогда не пропускает оставшуюся часть кода до второго щелчка. Есть идеи?

$(document).ready(function() { 
      $('#startbutton').click(function() { 

       $.get('getquestion', 
         function(data, status) { 
         var qAndA = data 
         window.jsonQA = jQuery.parseJSON(qAndA); 
         console.log(jsonQA) 
       }); 

       console.log('hit') 

       var questionArray = [] 
       for (var i in jsonQA) { 
        questionArray.push(i) 
       } 

       var index = Math.floor(Math.random() * questionArray.length) 

       var theQuestion = questionArray[index] 

       $('#question').html(theQuestion) 

       console.log('hit2') 
      }); 
     }); 

Answer 1

Вы используете jsonQA, который является init. после получить. Здесь в этом случае получить ответ - это время. Таким образом, либо вы, но остающийся код получаете функцию успеха, как показано ниже (случай 1), или используйте setTimeout (случай 2), или вы также можете использовать метод «done» из $ .get.

Случай 1: (Ввод кода в добиться успеха)

$(document).ready(function() { 
       $('#startbutton').click(function() { 

      $.get('getquestion', 
       function(data, status) { 
        var qAndA = data 
        window.jsonQA = jQuery.parseJSON(qAndA); 
        console.log(jsonQA) 
        console.log('hit') 

        var questionArray = [] 
        for (var i in jsonQA) { 
         questionArray.push(i) 
        } 

        var index = Math.floor(Math.random() * questionArray.length) 

        var theQuestion = questionArray[index] 

        $('#question').html(theQuestion) 

        console.log('hit2') 
        }); 


       }); 
      }); 

Случай 2: с помощью SetTimeout (время давая выполнить $ .get)

$(document).ready(function() { 
     $('#startbutton').click(function() {  
     $.get('getquestion', 
      function(data, status) { 
       var qAndA = data 
       window.jsonQA = jQuery.parseJSON(qAndA); 
       console.log(jsonQA) 
       });      
      }); 

     setTimeout(function(){ 

       console.log('hit')  
       var questionArray = [] 
       for (var i in jsonQA) { 
        questionArray.push(i) 
       } 

       var index = Math.floor(Math.random() * questionArray.length) 

       var theQuestion = questionArray[index] 

       $('#question').html(theQuestion) 

       console.log('hit2') 


     },2000);//giving 2 sec time 

     }); 

Answer 2

Я предполагаю, что это не работает остальные коды из-за неопределенный window.jsonQA. вы должны определить его перед использованием.

Answer 3

Сво вопрос времени. Ваш .get является асинхронным, но остальная часть вашего кода зависит от него.

Во второй раз, когда вы нажимаете, GET завершил, но не первый раз, когда вы его запустили.

Вы должны поместить остальную часть этого кода в:

function(data, status) { 
    var qAndA = data 
    window.jsonQA = jQuery.parseJSON(qAndA); 
    console.log(jsonQA) 
    //put the rest of the code here... 
} 

Answer 4

Причина ваш код не работает это по времени AJAX Response возвращается код уже двигаться вперед. Вы можете использовать флаг «async: true» и переместить логику обработки в теге Response on Success. Существует еще один способ сделать это с помощью интерфейса PROMISE, как предлагается ниже:

$.get(
    url: url, 
    data: data, 
    dataType: dataType 
).*done*(function(data){ 

    //Move all your processing logic here 
// Transform Response ..bla blas 
var questionArray = [] 
       for (var i in jsonQA) { 
        questionArray.push(i) 
       } 

       var index = Math.floor(Math.random() * questionArray.length) 

       var theQuestion = questionArray[index] 

       $('#question').html(theQuestion) 



    });