javascript - 如何取消javascript中的异步进程？

Question

我有一个单窗口 javascript 应用程序。我有一个仪表板，它通过在后台通过多个获取请求加载来显示某些图像。

当并非所有 get 请求都按时完成并且网站上下文发生变化时就会出现问题，因为那时我想清除仪表板。然而，如果获取请求尚未完成，他们将使用错误的图像填充仪表板。

我正在想办法中止那些获取请求。有人可以指导我正确的方向吗？

var Dashboard = {
    showAllAssets: function(){
        var self = this;
        this.resetDashboard();

        $.get(this.urlForAllAssets, function(json){
           self.loadAssets(json);
        });

    },
    showAssetsForCategory: function(categoryId) {
        ...

    },
    getHtmlForAsset: function(id) {
        var self = this;
        $.get(this.urlForDashboardThumb + "/" + id.toString(), function(assetHtml){
            var $asset = $(assetHtml);
            self.insertAssetThumbIntoDom($asset);
            // this gets inserted even when context changed, how can I prevent that?
            var thumb = Object.create(Thumbnail);
            thumb.init($asset);
        }, 'html')
    },
    insertAssetThumbIntoDom: function($asset) {
        $asset.appendTo(this.$el);
    },
    resetDashboard: function() {
        this.$el.html("");
    },
    loadAssets: function(idList) {
        var self = this;
        var time = 200;

        // These get requests will pile up in the background

        $.each(idList, function(){
            var asset = this;
            setTimeout(function(){
                self.getHtmlForAsset(asset.id);
            }, time);
            time += 200;
        });
    },
    bind: function() {
        $document.on('loadAssets', function(event, idList) {
            self.loadAssets(idList);
        });

        $document.on('switched_to_category', function(event, categoryId) {
            self.showAssetsForCategory(categoryId);
        });

        $document.on('show_all_assets', function(){
            self.showAllAssets();
        })
    },
    init: function($el) {
        this.$el = $el;
        this.resetDashboard();
        this.bind();
    }
}

Answer 1

虽然您无法停止已发送的请求，但您仍然可以解决您的问题。

我的解决方案是生成一个简单的 ID，例如一组随机数字，并将其存储在仪表板中的某个位置，将其与请求一起发送，然后将其与图像一起发回。

如果生成了一个新的上下文，它将有一个新的 ID。

如果图像返回的 ID 与当前上下文中的 ID 不同，则丢弃它。