Изменение переменной javascript внутри функции

Question

Я прочитал об объявлении переменных по всему миру, а затем смог изменить их в функциях, но для меня все не работает.

Вот мой код:

var selectee = "JK"; 
// get state selected 
$('select.form-control.bfh-states').change(function() { 
    selectee = $('select option:selected').val(); 
    // works correctly, but i need to access it outside the function 
    console.log(selectee); 
}); 

// output JK, should change based on a select box on the form 
console.log(selectee); 

Answer 1

Это происходит потому, что change() обработчика будет выполнен только тогда, когда событие изменения увольняет из выбранного элемента. Вы используете console.log() заявление в последовательном executio, которые будут выполнены до того, как обработчик изменения обжигают

//this is correct 
var selectee = "JK"; 

//this registers a change handler for the select element 
$('select.form-control.bfh-states').change(function() { 
    //but this will not execute now!!! it will get executed only when the select elements change event is fired 
    selectee = $(this).val(); 
    console.log(selectee); // works correctly, but i need to access it outside the function 
}); 

//this will get executed as soon as the change handler is registered not after the handler is executed 
console.log(selectee); 

Если вы хотите selectee иметь значение, выбранное в select элемента, то вы можете сделать что-то вроде

var selectee = $('select.form-control.bfh-states').val() || "JK"; 

или вручную сгореть выберите обработчик изменения после того, как обработчик прикрепленная на дом готов, как

var selectee = "JK"; 

$('select.form-control.bfh-states').change(function() { 
    selectee = $(this).val(); 
    console.log(selectee); // works correctly, but i need to access it outside the function 
}).change(); 

Answer 2

Вы код, как вы думаете, не работает процедурно. selectee будет отображать новое значение только после того, как событие изменения вашего выбранного элемента управления будет запущено. Коды внутри обработчиков событий не выполняются до тех пор, пока они не будут вызваны/запущены/запущены. Но внешние, как и ваш console.log(selectee), будут выполняться при первом загрузке кода (что в вашем случае событие изменения не было вызвано).

Answer 3

Это происходит потому, что change обработчик обратного вызова, он будет уволен после того, как события происходят, не выполнил заказ кода

Answer 4

То, как решить эту проблему состоит в выполнении кода, который должен значение Selectee изнутри изменить обработчик. Во-первых, вы не должны хранить его в глобальной переменной.

// get state selected 
$('select.form-control.bfh-states').change(function() { 
    var selectee = $('select option:selected').val(); 
    console.log(selectee); // works correctly, but i need to access it outside the function 

    // call your other code from here and pass it the current value of selectee 
    myOtherFunction(selectee); 

}); 

Чтобы объяснить, функция .change() обратного вызова выполняется только тогда, когда значение избранных фактически изменяется. Он будет называться когда-нибудь ПОЗЖЕ. Таким образом, чтобы использовать значение selectee когда-нибудь позже, вам нужно выполнить код, который нуждается в этом значении, в то же время, когда новое значение было изменено.

Answer 5

Альтернативным методом было бы передать выбранное значение в новую функцию и, следовательно, получить доступ к ней внутри этой функции (а не по всему миру). Попробуйте это:

selectee = "JK"; 
// get state selected 
$('select.form-control.bfh-states').change(function() { 

selectee = $('select option:selected').val(); 
// works correctly, but i need to access it outside the function 
mynewfunc(selectee); 

}); 
function mynewfunc(){ 
alert(selectee); 
} 

Примечание: Переменная selectee не доступен за пределами новой функции mynewfunc после того, как изменение срабатывает.

Demo