javascript - 无法让我的变量将其值保留在 getJSON 之外

Question

您好，我对这段代码有疑问。我的问题是第一个 console.log(smile_per_sec) 给了我需要的值，但是第二个给了我声明变量时给它的值。

  $.getJSON( 
    twitter_api_url + '?callback=?&rpp=100&q=text::)',
    function(data) {
      $.each(data.results, function(i, tweet) {
        //console.log(tweet);
        // Before we continue we check that we got data
        if(tweet.text !== undefined) {
        //here we save the time of our happy tweet
          var date_tweet = new Date(tweet.created_at);
          per_sec[i] = date_tweet/1000;
          //console.log(per_sec[i]);
        }
      });

      //here we calculate how manny happy tweets the world tweets per second
        smile_per_sec = 100/(per_sec[0]-per_sec[98])
        $('#tweet_container').append(smile_per_sec + "<br>");   
          console.log(smile_per_sec);
          return smile_per_sec;
    }
  );
console.log(smile_per_sec);

这可能是一个简单的修复，但仍然非常感谢您的帮助。

Answer 1

我假设您想在下面我标注的两个地方进行比较:

$.getJSON( 
  twitter_api_url + '?callback=?&rpp=100&q=text::)',
  function(data) {
    $.each(data.results, function(i, tweet) {
      //console.log(tweet);
      // Before we continue we check that we got data
      if(tweet.text !== undefined) {
        //here we save the time of our happy tweet
        var date_tweet = new Date(tweet.created_at);
        per_sec[i] = date_tweet/1000;
        //console.log(per_sec[i]);
      }
    });
    //here we calculate how manny happy tweets the world tweets per second
    smile_per_sec = 100/(per_sec[0]-per_sec[98])
    $('#tweet_container').append(smile_per_sec + "<br>");   
    ///////////////////////////////////////////////
    //  this is place one
    ///////////////////////////////////////////////
    console.log(smile_per_sec);
    return smile_per_sec;
  }
);
///////////////////////////////////////////////
// this is place two
///////////////////////////////////////////////
console.log(smile_per_sec);

地方二立即执行，地方一等到 getJSON 发生。这称为异步编程。在获得该值之前，您不能使用该值，如果您希望某事“等待另一件事完成”，则需要采用灵活的异步编程技术。

每当人们谈论 javascript 中的事件或回调时，他们就是在谈论这些。在这种情况下，您的回调在第三行开始 function(data)。

我觉得有必要详细说明，让我这样做:

$.getJSON( ... );
console.log(smile_per_sec);

这两者有效地“同时”运作。 getJSON 中发生的事情在完成之前会一直搁置，让您的页面继续做事。所以 console.log 只是继续并弹出，但后面的燃烧器还没有回到前面，水还没有沸腾。所以直到水沸腾(可能是 10 毫秒，可能是 3 分钟)，你不能对水、水中的面条或其他任何东西做任何事情。

我意识到一开始这很难掌握，但是一旦你掌握了这一点，你就会掌握整个 ajax 的东西。

要回答“我如何让它在完成时执行所有操作”的问题，答案是像这样重构您的代码:

// Here we've made this a named function, and allowed the function to be more neatly encapsulated
function twitterCallback(data) {
  $.each(data.results, function(i, tweet) {
    //console.log(tweet);
    // Before we continue we check that we got data
    if(tweet.text !== undefined) {
      //here we save the time of our happy tweet
      var date_tweet = new Date(tweet.created_at);
      per_sec[i] = date_tweet/1000;
      //console.log(per_sec[i]);
    }
  });
  //here we calculate how manny happy tweets the world tweets per second
  smile_per_sec = 100/(per_sec[0]-per_sec[98])
  $('#tweet_container').append(smile_per_sec + "<br>");   

  console.log(smile_per_sec);
  return smile_per_sec;

  ///////////////////////////////////////////////
  //  this is where you put stuff that has to wait on twitter to return
  ///////////////////////////////////////////////

}

$.getJSON( 
  twitter_api_url + '?callback=?&rpp=100&q=text::)',
  twitterCallback
);