Question

我有这个jQuery函数，它不会执行所有代码，直到第二次单击。它转到$ .get的外部并执行第一个＆＃39; console.log（＆＃39; hit＆＃39;）＆＃39;但是直到第二次点击它才会通过其余的代码。有什么想法吗？

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

这是一个时间问题。你的.get是异步的，但你的代码的其余部分依赖于它。

第二次单击时，GET已完成，但不是第一次运行。

您需要将其余代码放在：

中

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

Answer 2

您正在使用init的jsonQA。得到之后。在这种情况下，get是响应是需要时间。所以要么你在剩余代码中获得成功函数如下（案例1）或使用setTimeout（案例2），或者你也可以使用＆＃34;完成＆＃34; $ .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 3

您的代码无法正常工作的原因是当AJAX响应回来时您的代码已经向前发展。您可以使用标志“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)



    });

Answer 4

我想由于未定义的window.jsonQA，它不会运行其余的代码。你必须在使用之前定义它。

jQuery .click函数需要两次点击？

4 个答案: