странный вывод о JQuery

Question

---

var message = 'Spoon!'; 
$('#foo').bind('click', function() { 
alert(message); 
}); 

message = 'Not in the face!'; 
$('#bar').bind('click', function() { 
alert(message); 
}); 

---

Почему два выходных сообщения одинаковы: «Не в лицо!»; Не первое сообщение в закрытии 'foo' означает 'Spoon!'? Почему бы и нет? Пожалуйста, объясните кому-нибудь. Я не понимаю объяснения учебника.

Answer 1

Это потому, что обработчики событий запускаются асинхронно. Пока значение сообщения, которое вы устанавливаете, выполняется в первом потоке.

Таким образом, в основном ваша программа будет читать весь ваш код, установить значение 'Spoon!', а затем до последнего установленного вами 'Not in the face!'. Затем, когда вы нажимаете на любую из кнопок, он будет предупреждать значение сообщения 'Not in the face!'.

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

$('#foo').bind('click', function() { 
    var message = 'Spoon!'; 
    alert(message); 
}); 

$('#bar').bind('click', function() { 
    var message = 'Not in the face!'; 
    alert(message); 
}); 

Answer 2

Когда нажата кнопка foo, она будет предупреждать о последнем значении message, которое будет «Не в лицо!». поскольку эта строка кода уже выполнена при загрузке страницы.

Answer 3

только связывание функции происходит .The фактического выполнения коды происходит, когда нажмите evenet occurs.When события щелчка occues переменного сообщения будет его последнее значение, которое «не в лице»

Answer 4

// below you are estblishing the "variable" message and setting it to the String "Spoon!" 
var message = 'Spoon!'; 
// Here you use the jquery method to tell a button with the ID "foo" 
// to alert the variable "message" 
$('#foo').bind('click', function() { 
    alert(message); // the alert 
}); 

// Here's where you're getting confused 
//Below you are "re-asigning the variable "message" to be the String "Not in the face!" 
message = 'Not in the face!'; 
// below is another click bind to a button, but this time the id name is "bar" 
// so both buttons (foo and bar) are committing the same action, 
// but your variable has been changed to "Not in the face!" and therefor 
// will never display "Spoon!" 
$('#bar').bind('click', function() { 
    alert(message); 
});