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

我猜它没有运行其余代码，因为未定义 window.jsonQA。你必须在使用它之前定义它。

Answer 2

您正在使用 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 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 响应返回时您的代码已经向前推进。您可以使用标志 "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)



    });

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

jQuery .click function requiring two clicks?

jquery