javascript 对象逐行执行

Question

我正在尝试使用 JavaScript 验证图像 URL 是否存在。基本上我想将 URL 分配给有效的图像。但是验证 URL 的 JavaScript 函数没有逐行执行，因此破坏了逻辑并且 returns 所有 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)" />

也意味着我正在处理跨域图像URLs。

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 未找到。要尝试成功的情况，请将上例中的 "x" 更改为数字，例如 250.

javascript 对象逐行执行

Line by line execution for javascript object

javascript

asynchronous

line-by-line