当我切换到另一条路线时，中止 Sammy.RenderContext 请求序列？答案

【问题标题】：Abort the Sammy.RenderContext sequence of requests when I switch to another route?当我切换到另一条路线时，中止 Sammy.RenderContext 请求序列？
【发布时间】：2014-05-12 11:54:34
【问题描述】：

我有一个路由以下列方式调用一系列加载请求：

this                                                       
  .load('/url/to/template.html')
  .then(function(html) {                                                                                         

  })                                                                  
  .load('/url/to/partial/template.html')
  .then(function(html) {

  })                                                                  
  .load('/url/to/partial/template.html')    
  .then(function(html) {

  })                                                                  
  .load('/url/to/json', {json: true})   
  .then(function(data){                                               

  });

如果我切换到另一条路线，有没有办法中止这些请求？

【问题讨论】：

标签： javascript sammy.js

【解决方案1】：

不幸的是，如果您切换到另一条路由，Sammy 无法内置中止异步请求。您可以做的最好的事情是在异步请求返回回调后中止处理由异步请求加载的数据。我将如何解决这个问题是使用一个全局对象，这将允许您检查它是否在您开始运行代码后发生了变化。它看起来像这样：

window.currentRoute = null;
Sammy.get('#/some/path/here', function() {
    // This should be an object because that way we can take advantage of
    // Reference Type equality. However, it doesn't matter what is put in
    // here, and could easily just be "new Object()".
    var localCurrentRoute = {
        'currentPath': '#/some/path/here'
    };
    // If you don't always want to override the current route, put some logic
    // before this assignment.
    window.currentRoute = localCurrentRoute;
    this.load('/url/to/template.html').then(function(html) {                                                                                         
        // Check if the route is the same object as what we started with, and
        // if not, abort further processing of this resource.
        if(window.currentRoute !== localCurrentRoute) {
            return;
        }
        // ... do stuff here
    });
});

使用此代码，每当您加载新路由时，您都应该更改全局指向的对象。使用引用类型相等，如果路由不是我们开始的，我们知道路由在我们下面发生了变化，并且异步 load().then() 方法不会进一步处理它们的数据。然而，这解决了异步加载的大多数问题（即它下面的上下文发生变化），我发现通常对于大多数用途来说已经足够了。

但是，这不会停止数据的加载，而 Sammy 默认无法做到这一点。如果您有特别长时间运行的请求，您可能会查看替代异步库，并且必须修改上面的代码以存储对每次加载新路由时中止的每个异步调用的引用。我将把它作为练习留给读者使用他们最喜欢的库。

【讨论】：

【解决方案2】：

没有内置选项，但我做了一些解决方法。在 sammy.js 中：

(function ($) {

var Sammy,
     currentXhr = null //Added this var

....

// added this method to abort ajax call 
abort: function () {
          if (currentXhr) {
              currentXhr.abort();
              currentXhr = null;
          }
      },
      
load: function (location, options, callback) {
                var context = this;
                return this.then(function () {
                    ....
                     this.wait();
                     
                     //abort any current call
                     this.abort(); //Added this row
                     
                     currentXhr = $.ajax($.extend({ //added 'currentXhr ='
                     ...

【讨论】：