在函数内设置全局范围变量

Question

我正在尝试根据元素的高度设置动画触发器。 该项目是使用AngularJS构建的，但我遇到的问题似乎真的很奇怪。 我正在尝试在图像加载时设置imgH变量。 在我的onload函数中，日志返回正确的图像高度并设置全局变量imgH。 在我的onload函数之后，控制台日志命令返回imgH = undefined

var imgH;
        $('.step-image').on('load',function(){
            imgH = $(this).height();
            console.log(imgH);
        });
console.log(imgH);

Answer 1

变量已设置，但最后执行console.log时尚未设置。

这是您的代码运行的顺序：

1. var imgH; -创建初始值为undefined的全局变量。
2. $('.step-image').on('load', function ...) -设置处理程序，尚未（尚未）调用该函数。
3. console.log(imgH); （在底部）-显示undefined因为还没有为imgH分配值。
4. 稍后 ，在加载图像时，将调用处理程序函数并设置imgH 。
5. console.log(imgH); （在处理函数中）-显示值。