Неопределенная переменная вне функции

Question

У меня есть код, который использует node.js и socket.io.

Когда я написал этот код таким образом;

стороне сервера:

function display(width, height){ 
 
    this.width = width * 2; 
 
    this.height = height * 2; 
 
} 
 

 
function position(x, y){ 
 
    this.x = x; 
 
    this.y = y; 
 
} 
 

 
function initialize(){ 
 
    for(var x = circlePosition.length; x < circleCount; x++){ 
 
    circlePosition[x] = new position(Math.random() * (resolution.width - (-resolution.width)) + (-resolution.width), Math.random() * (resolution.height - (-resolution.height)) + (-resolution.height)); 
 
    
 
    } 
 
} 
 

 
socket.on('display', 
 
     function(data) { 
 
     resolution = new display(data.width, data.height); 
 
     initialize(); 
 
     io.sockets.emit('positioning', circlePosition); 
 
     });

на стороне клиента;

var position; 
 
var resolution = { 
 
\t \t width: 1366, 
 
\t \t height: 666 
 
\t }; 
 

 
\t socket.emit('display', resolution); 
 

 
\t socket.on('positioning', 
 
\t \t function(data){ 
 
\t \t \t position = data; 
 
\t \t }); 
 
\t console.log(position); // <---

Переменная положение не определено, но если я использовать этот код на стороне клиента

var position; 
 
var resolution = { 
 
\t \t width: 1366, 
 
\t \t height: 666 
 
\t }; 
 

 
\t socket.emit('display', resolution); 
 

 
\t socket.on('positioning', 
 
\t \t function(data){ 
 
\t \t \t position = data; 
 
     console.log(position); // <--- 
 
\t \t }); 
 
\t

Он имеет значение. Почему я не могу использовать значение, отправленное с помощью функции socket.io вне функции?

Answer 1

Подумайте о том, что именно эта строка кода делает:

socket.on('positioning', 
    function(data){ 
     position = data; 
    }); 

Это настройка функции обратного вызова , которая будет вызываться, когда вы получите событие positioning. Но учтите, что эта функция еще не вызывается! Он будет называться когда-нибудь в будущем. Это всего лишь инициализации функции.

Если вы поставите console.log() вызов после инициализации функции обратного вызова, которая будет происходить console.log()перед тем функция на самом деле называется! Вот почему переменная не определена, потому что переменная еще не установлена!

Если поставить console.log() вызов внутри функции обратного вызова, то вы гарантировать, что это произойдет после того, как функция обратного вызова вызывается, поэтому переменная установлена.

Это может быть более ясным, если вы не используете встроенную функцию:

var position; 
var resolution = { 
     width: 1366, 
     height: 666 
    }; 

socket.emit('display', resolution); 
socket.on('positioning', myCallback); 
console.log(position); 

function myCallback(data){ 
    position = data; 
} 

Это именно то, что ваш код делает, только теперь я использую именованную функцию вместо встроенной функции. Но теперь более очевидно, что обратный вызов еще не вызывается, когда выполняется console.log().

Answer 2

В первом сценарии клиента ваш console.log(position) работает до того, как ваш обработчик событий запущен. Помните, что когда вы делаете socket.on(...), вы просто регистрируете обработчик событий, который может быть вызван в будущем. Остальная часть вашего кода продолжает работать. Итак, следующая строка после регистрации вашего обработчика событий - это оператор console.log(). Поскольку обработчик событий еще не был запущен (он зарегистрирован, но пока ничего не произошло, чтобы его запустить), position еще не имеет значения.

Так, глядя на ваш код:

socket.on('positioning', function(data) { 
    position = data; 
}); 
// position has not yet been set because the above event handler 
// has not yet been triggered 
console.log(position); 

единственное безопасное место, чтобы использовать данные, отправленные positioning события ВНУТРИ обратного вызова, который является именно то, что вы делаете в другом сценарии, где работают вещи правильно:

socket.on('positioning', function(data) { 
    // use the data here 
    console.log(data); 
}); 

FYI, это фундаментальная концепция программирования, управляемой событиями. Вы регистрируете обработчики событий, которые в будущем называются. Вы часто не знаете, когда они будут вызваны, поэтому вам нужно просто обрабатывать данные, которые они предоставляют внутри обработчика событий, когда они вызываются.

Answer 3

socket.on() это асинхронно называют - это означает, что ваш будет вызывать только анонимную функцию послеdata был полностью загружен с сервера.

---

Примечания: Вы можете использовать position из другого кода, который вне анонимной функции после анонимной функции была запущена (Да, вы должны ждать, чтобы получить доступ к нему). Но как?Ну, лучший способ сделать это, чтобы положить зависимый код в свою собственную функцию, а затем вызвать эту функцию из функции обратного вызова, как в этом примере:

var position; 
 
var resolution = { 
 
    width: 1366, 
 
    height: 666 
 
}; 
 

 
socket.emit('display', resolution); 
 

 
socket.on('positioning', 
 
    function(data) { 
 
    loadPosition(); // <--- 
 
    } 
 
); 
 

 
function loadPosition() { 
 
    position = data; 
 
    console.log(position); // ... do whatever you need to do with postion here 
 
}

Answer 4

Вы можете передать вы возражаете/значение, полученное от ответа CallBack

var position; 
var resolution = { 
    width: 1366, 
    height: 666 
}; 

socket.emit('display', resolution); 

socket.on('positioning', 
    function(data){ 
     position = data; 
    positionUpdate() 
    }); 

function positionUpdate(){ 
console.log(position); 
} 

Answer 5

если вы еще не решили свою проблему, попробуйте это. Это то, что я сделал.

var resolution = { 
    width: 1366, 
    height: 666 
}; 

socket.emit('display', resolution); 

socket.on('positioning', function(data){ 
    getPosition(data, position); 
}); 

var getPosition = function(data, callback){ 
    callback(data); 
} 

var position = function(data){ 
    console.log(data); // <-- 
}