Question

以下是我在javascript脚本标记中声明的变量。变量是全局声明的，并在内部函数中初始化，该函数位于另一个函数（外部）中。

问题是;当我尝试使用console.log检查变量时，我得到“未定义”。我不知道为什么。

我已经阅读了Javascript变量的变量提升，范围等。但我无法解决它。请帮忙。

                      var width;
                      var height;
                      var ratio;
                      var nwidth;
                      var nheight;
                      var wbool;
                      var imgsrc;
                      var canvas;

    $("#myimage").change(function(){
            readURL(this);
        });


    function readURL(input) {
            if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                      var image = new Image();
                      image.src = e.target.result;

                      image.onload = function(){
                            if(this.width > this.height){
                                ratio = this.width/this.height;
                                nheight = parseInt(Math.ceil(1024/ratio));
                                wbool = true;
                            }
                            else{
                                ratio = this.height/this.width;
                                window.nwidth = parseInt(Math.ceil(768*ratio));
                                wbool = false;                                                                  
                            }
                      }
                    console.log(window.nwidth + "" + wbool);

Answer 1

在console.log()分配之前，您nwidth var width; var height; var ratio; var nwidth; var nheight; var wbool; var imgsrc; var canvas; $("#myimage").change(function(){ readURL(this); }); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { var image = new Image(); image.src = e.target.result; image.onload = function(){ if(this.width > this.height){ ratio = this.width/this.height; nheight = parseInt(Math.ceil(1024/ratio)); wbool = true; } else{ ratio = this.height/this.width; window.nwidth = parseInt(Math.ceil(768*ratio)); wbool = false; // it will be defined here, because you are doing // it inside the async operation. console.log(window.nwidth); } } // this will be undefined, because the var has not been set // by the time this line executes. console.log(window.nwidth + "" + wbool);。

image.onload是一个异步操作（就像回调一样）。 console.log（）在分配变量数据之前触发。

尝试将日志移动到onload函数。

$("#myimage").change(function(){
        readURL(this);
    });

    // SET UP LISTENER FOR YOUR CUSTOM EVENT
    $(document).on('fileWasLoaded', function () {
        console.log(window.nwidth + "" + wbool);
    });


function readURL(input) {
        if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                  var image = new Image();
                  image.src = e.target.result;

                  image.onload = function(){
                        if(this.width > this.height){
                            ratio = this.width/this.height;
                            nheight = parseInt(Math.ceil(1024/ratio));
                            wbool = true;
                        }
                        else{
                            ratio = this.height/this.width;
                            window.nwidth = parseInt(Math.ceil(768*ratio));
                            wbool = false; 
                            // TRIGGER YOUR CUSTOM EVENT WHEN THE IMAGE IS LOADED
                            $(document).trigger('fileWasLoaded');                 
                        }
                  }

为什么会这样？

异步操作，如ajax调用（或代码中的文件加载），需要时间才能完成。由于javascript在单个线程上运行，如果应用程序停止并等待操作完成，则浏览器将锁定。不好！</ p>

因此，跳过异步操作，并在操作完成后执行回调部分。这意味着您的代码执行如下：

开始加载文件
console.log（）// undefined
加载完成，并且已定义变量。

要触发自定义事件，您可以执行以下操作：

mouseover

声明和初始化Javascript变量，但在选中时提供undefined

1 个答案: