javascript抑制错误并在for循环中继续答案

【问题标题】：javascript suppress error and continue in for loopjavascript抑制错误并在for循环中继续
【发布时间】：2013-03-27 09:06:01
【问题描述】：

我正在尝试通过从 Internet 下载 3 个图像文件并平均加载它们所花费的时间来实现速度测试。如果由于某种原因出现错误，我想跳过加载该图像并继续下一个。如果错误发生在最后一张图片上，那么我想计算该点的平均速度并返回给调用者。

现在，一旦发生错误（我故意更改了图像的 url，使其不存在），它不会再进一步。我尝试从 .onerror 函数返回 true，但没有运气。有什么建议吗？

     var images = [{
            "url": 'http://<removed>250k.jpg?n=' + Math.random(),
            "size": 256000
        }, {
            "url": 'http://<removed>500k.jpg?n=' + Math.random(),
            "size": 512000
        }, {
            "url": '<removed>1000k.jpg?n=' + Math.random(),
            "size": 1024000
        }
    ];


function calculateBandwidth() {
    var results = [];
    for (var i = 0; i < images.length; i++) {
        var startTime, endTime;
        var downloadSize = images[i].size;
        var download = new Image();
        download.onload = function () {
            endTime = (new Date()).getTime();

            var duration = (endTime - startTime) / 1000;
            var bitsLoaded = downloadSize * 8;

            var speedBps = (bitsLoaded / duration).toFixed(2);
            var speedKbps = (speedBps / 1024).toFixed(2);
            var speedMbps = (speedKbps / 1024).toFixed(2);

            results.push(speedMbps);

            //Calculate the average speed
            if (results.length == 3) {
                var avg = (parseFloat(results[0]) + parseFloat(results[1]) + parseFloat(results[2])).toFixed(2);
                return avg;
            }
        }
        download.onerror = function (e) {
            console.log("Failed to load image!");
            return true;
        };
        startTime = (new Date()).getTime();
        download.src = images[i].url;
    }
}

【问题讨论】：

查看 try/catch 块
失败时你会返回，这就是我猜的原因
没有必要返回，一旦你返回你就打破了你的循环
我做了一些事情similar here（fiddle demo，可能加载缓慢）。我认为您不满意的原因是，如果您要链接请求，如果onerror 也可以继续该过程。所以不是return true/false;，而是“ok error，处理它，现在更多图像，还是完成测试？”来自错误处理程序。

标签： javascript

【解决方案1】：

我认为您没有做的是在每个事件发生时控制流程。每个onerror 和onload 都告诉您进程停止，而不是它本身应该退出。你初始化一张图片，它没有加载，也许记下，否则继续。

问题是，你在onload 的末尾也做同样的事情。也就是说，进行任何测量，然后移至下一个，或者，如果没有更多，则运行清理和报告或诸如此类的脚本。

例如：

var site = 'http://upload.wikimedia.org/',
    imgs = [
    'wikipedia/commons/6/6e/Brandenburger_Tor_2004.jpg',
    'wikipedia/commons/a/ad/Cegonha_alsaciana.jpg',
    'wikipe/Cegonha_alsaciana.jpg',
    'wikipedia/commons/d/da/CrayonLogs.jpg',
    'wikipedia/commons/1/17/Bobbahn_ep.jpg',
    'wikipedia/commons/9/90/DS_Citro%C3%ABn.jpg',
    'wikipedia/commons/f/f0/DeutzFahr_Ladewagen_K_7.39.jpg',
    'wikipedia/commons/c/c7/DenglerSW-Peach-faced-Lovebird-20051026-1280x960.jpg',
    'wikipedia/commons/4/4d/FA-18F_Breaking_SoundBarrier.jpg'
];

我的图像数组。提示，wikipe/Cegonha_alsaciana.jpg 不会加载。预先警告，它们很大并且加载缓慢，我使用缓存破坏器来保持它们触发onloads。

getimg();

在小提琴中，这一切都在window.onload 事件处理程序中，所以当它被调用时，这会初始化进程。我本身没有设置阶段，否则我可能将其称为 init() 或 setup()。

function getimg() {
    var img = document.createElement('img'),
        path = imgs.shift();

    if (path) {
        img.onload = loaded;
        img.onerror = notloaded;
        img.src = site + path + '?cach=bust' + Math.floor(Math.random() * 9999);

        console.log('Loading ', img.src);

        document.body.appendChild(img);
    } else {
        console.log('Finished loading images.');
    }

    function loaded(e) {
        console.log('Loaded ', e.target.src);
        next();
    }

    function notloaded(e) {
        console.log('Not loaded ', e.target.src);
        next();
    }

    function next() {
        console.log(imgs.length, ' imgs left to load.');
        getimg();
    }
}

http://jsfiddle.net/userdude/vfTfP/

这可以做你想做的事，没有内置的计时机制。我可以将事情分解为步骤、动作和事件，以便我可以根据需要控制这些步骤。基本上，您的脚本运行方式应该不会有太大差异。

【讨论】：