Javascript 定义全局变量

Question

I want to use single_video variable in outside of the controller function. It prints well in first console log. However it gives a single_video is undefined error in second console.log which is outside of the controller function. I am very poor at both javascript and angularjs.

   var single_video;
    var app = angular.module('myApp', []);
    app.controller('randomVideo', function($scope, $http) {
        var onSuccess = function(response){
            $scope.video = response.data; 
            single_video = $scope.video;
            //First console.log
            console.log('1st ID='+single_video.yt_id);
        };
        var onError = function(reason){
            $scope.error = "There is an error about getting random_video.php";
        };
       $http.get("http://www.ytmdb.com/ytvideo/api/random_video.php")
       .then(onSuccess, onError);
    });
    //Second console.log
    console.log('2nd ID='+single_video.yt_id);

Answer 1

Even single_video is declared, it is not defined, ie it doesn' have defined any value in time of calling second console.log().

In fact, your first console.log is called later than second, because you just defined some functions, but not called them and therefore didn't set values, sooner than you called your "second console.log".

Answer 2

There is no problem with your variable. I guess your second console.log is called before the first one.

You should Google "javascript async" or "javascript callback" to understand how asynchronous code works.

To summarize, when you do "$http.get" you make an HTTP request to a server, which will respond after a certain amount of time. When the server responds, your "onSuccess" is called, and your variable is set. Not before.

In the meantime, you second console.log will be executed immediately after initializing the HTTP request - so before the server response and the "onSuccess" callback.