javascript - javascript对象逐行执行

Question

我正在尝试使用 JavaScript 验证图像 URL 是否存在。基本上我想将 URL 分配给图像(如果它有效)。但是验证 URL 的 JavaScript 函数由于不是逐行执行，因此会破坏逻辑并返回所有 URL 为 true。有什么方法可以将控件保留在 urlExists 函数内，直​​到其所有线程完成为止？

目前控件不等待错误消息的结果，而是跳过它返回到具有真值的调用函数。知道如何让函数在这里保持控制吗？

function urlExists(testUrl) {
    var ret = true;
    var newImage = new Image();
    newImage.src = testUrl;
    $(newImage).error(
        function(){
            ret = false;
        }
    );
    return ret;
}
function changeImagePath(obj){
    var oldUrl = obj.src;
    var newUrl = oldUrl.replace("abc","xyz");
    if(urlExists(newUrl)){
        obj.src = newUrl;
    }   
}

<img src="http://sample.com/images/srpr/logo_abc.png" onclick="changeImagePath(this)" />

还想提一下我正在处理跨域图像 URL。

Answer 1

您可以将代码作为回调函数传入以修改现有图像。无需创建新图像来执行检查:

function urlExists(img, newUrl, callback) {
  $(img).error(callback).attr('src', newUrl);
}

function changeImagePath(obj) {
  var oldUrl = obj.src;
  var newUrl = oldUrl.replace("200", "x");
  urlExists(obj, newUrl, function() {
    obj.src = oldUrl;
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Click to attempt to change the image
<img src='https://placekitten.com/g/200/300' alt='cat' onclick='changeImagePath(this);'>

正如您在浏览器控制台中看到的，HTTP 请求已完成，并返回 404 not find。要尝试成功的情况，请将上例中的“x”更改为数字，例如 250。