为什么在jQuery的on函数内部修改全局变量后，变量值未发生改变？

嘿，这个问题我太熟了——本质是JavaScript里异步事件回调的执行顺序搞的鬼！咱们来一步步捋清楚：

你写的代码里，console.log(valueA)是在页面加载完成后立刻同步执行的，但给滑块绑定的input事件回调函数，只有用户拖动滑块触发事件的时候才会运行。也就是说，当控制台打印valueA的时候，用户还没碰过滑块呢，回调里的valueA = this.value根本没机会执行，所以输出自然是初始值0。

给你几个解决思路：

1. 在回调内部实时打印更新后的值 #

如果只是想看到valueA的实时变化，直接把console.log挪到事件回调里就行，这样每次滑块拖动时都会触发打印：

var valueA = 0;
var value = $('#myRange');
value.on('input', function(){
    valueA = this.value;
    console.log(valueA); // 这里每次拖动都会输出最新的滑块值
});

2. 在需要使用的时机再获取变量 #

如果要在回调外部拿到更新后的valueA，得确保你获取它的时机是在用户触发过input事件之后。比如加个按钮，点击时再打印：

var valueA = 0;
var value = $('#myRange');
value.on('input', function(){
    valueA = this.value;
});

// 假设页面上有个id为checkValueBtn的按钮
$('#checkValueBtn').on('click', function() {
    console.log(valueA); // 点击按钮时输出当前滑块的最新值
});

小补充：注意数值类型 #

另外提一句，this.value返回的是字符串类型的数值，如果后续需要做计算，记得转成数字：

valueA = parseInt(this.value, 10); // 转整数，用parseFloat可以转浮点数

内容的提问来源于stack exchange，提问作者Dvali