Question

我有一个名为isPortrait的JS函数，用于确定给定照片的方向。问题是，当我调用它时，它总是返回false。但是，alert（）工作正常，并返回照片的分辨率。我该如何解决？

function isPortrait(src) {
    var is  = false;
    var img = new Image();
    img.src = src;
    img.onload = function() {
        alert(img.width+"x"+img.height);
        if(img.height>img.width)
        {
            is = true;
        }
    }
    return is;
}

我的解决方案（使用全局变量）：

window.isportrait = false;
function isPortrait(src) {
    var img = new Image();
    img.src = src;
    img.onload = function() {
        if(img.height>img.width)
        {
            window.isportrait = true;
        }
        else
        {
            window.isportrait = false;
        }
    }
}

Answer 1

您的函数将始终返回false，因为onload事件被称为异步，这基本上意味着该函数将返回is 的值在执行onload函数之前。这就是为什么要使它工作，建议使用callbacks：

function do_something() {
   // do something
}

function isPortrait(src) {
    var img = new Image();
    img.src = src;
    img.onload = function() {
        if (img.height > img.width) {
            do_something();
        }
    };
}

Answer 2

该函数在完成异步调用之前返回false !!

我可以达到的最佳实施是JSBIN example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <h1 id="heading">? </h1>
</body>
</html>

和javasScript代码是：

var is  = false;

function isPortrait(src) {

var img = new Image();
img.src = src;
 var  here = img.onload = function() {

    alert(img.width+"x"+img.height);
    if(img.height>img.width)
    {
        is = true;


    }
  // it is here at this moment where you can get result of the 
 // awaited async function onload() 
 document.getElementById("heading").innerHTML = "is it Portrait ? " + is;

    };



}


   isPortrait("http://blogs.smithsonianmag.com/aroundthemall/files/2009/01/npg_portraits_nicholson_jack_2002-244x300.jpg");

编辑[使用＆＃39; setInterval`

的另一个更好的实施方式

     var is  = false;
     var notYetLoaded = true;


   function isPortrait(src){
      tryLoadImage(src);

    var myWaiting = setInterval(function(){
    if(notYetLoaded === false){


     // use the "is" boolean here

     document.getElementById("heading").innerHTML = "is it Portrait ? " + is;
     clearInterval(myWaiting);
     }
     }, 1000);
     }


     function tryLoadImage(src) {

    var img = new Image();
    img.src = src;
     var  here = img.onload = function() {

        alert(img.width+"x"+img.height);
        if(img.height>img.width)
        {
            is = true;


        }
      notYetLoaded = false;
      };



     }


       isPortrait("http://blogs.smithsonianmag.com/aroundthemall/files/2009/01/npg_portraits_nicholson_jack_2002-244x300.jpg");

代码在这里：http://jsbin.com/qodefuhe/1/edit

我希望有帮助：）

Answer 3

这是因为isPortrait（）返回的值是＆＃39;在完成执行onload函数之前。

您可以尝试以下方法，在其中声明变量＆＃39;是＆＃39;全局并调用另一个函数onload并从新函数返回is的值。

var is  = false;
var img = new Image();
function isPortrait(src) {
    img.src = src;
    img.onload = temp(src);
}

function temp(src) {
    is = test(src);
}

function test(src) {
        alert(img.width+"x"+img.height);
        if(img.height>img.width)
        {
            is = true;
        }
        return is;
}

JavaScript函数总是返回false

3 个答案: