javascript对象的逐行执行

Question

我正在尝试使用 JavaScript 验证图像 URL 是否存在。基本上，如果有效，我想将 URL 分配给图像。但是验证 URL 的 JavaScript 函数由于没有逐行执行，因此会破坏逻辑并返回所有 URL 为真。有什么方法可以在 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 found。要尝试成功的情况，请将上例中的“x”更改为诸如 250 之类的数字。