为什么我在骨干网的路由之间跳来跳去？

Question

所以我有一个路由文件：

Nightbird.Routers.Posts = Nightbird.Routers.Core.extend({

  DEFAULT_TIMEOUT: 15000,

  fetchPostsTimeout: null,

  routes: {
    'posts': 'posts',
    'post/:id': 'post',
  },

  posts: function() {
    var postsCollection = new Nightbird.Collections.Posts();
    postsCollection.fetch().then(this.postsRecieved, this.serverError);

    var self = this;
    this.fetchPostsTimeout = setInterval(function() {
      postsCollection.fetch().then(self.postsRecieved, self.serverError);
    }, this.DEFAULT_TIMEOUT);
  },

  post: function(id) {
    var postsCollection = new Nightbird.Collections.Posts({id: id});
    postsCollection.fetch().then(this.postRecieved.bind(this), self.serverError);
  },

  postsRecieved: function(collection, response, options) {
    var managementPostsView = new Nightbird.Views.ManagementPosts();
    managementPostsView.render(collection, this.currentPage);
  },

  postRecieved: function(collection, response, options) {
    new Nightbird.Views.ManagementPost(collection);
  },

})

这里所做的一切都是定义当您访问所述路线时会发生什么。因此，如果您访问 #posts 路由，您将获得一个帖子列表，并且我们每 15 秒检查一次新帖子。

但是假设您转到#posts，然后单击帖子并被带到#post/x，其中x 是帖子ID。让我们看一下单个帖子的视图。

Nightbird.Views.ManagementPost = Nightbird.Views.Core.extend({

  comments: {},

  post: {},

  commentsTimeOut: null,

  errorMessage: '',

  initialize: function(postsObject) {
    this.post = postsObject;
    var postId = this.post.post.id

    var commentsCollection = new Nightbird.Collections.Comments(postId);
    commentsCollection.fetch().then(this.getComments.bind(this), this.errorMessage.bind(this));

    var self = this;
    this.commentsTimeOut = setInterval(function() {
      commentsCollection.fetch().then(self.getComments.bind(self), self.errorMessage.bind(self));
    }, 15000);
  },

  getComments: function(collection, response, options) {
    this.comments = collection;
    this.render()
  },

  errorMessage: function() {
    this.errorMessage = 'We could not retrieve comments for the post. We will try again in 15 seconds.';
  },


  render: function(collection) {
    React.renderComponent(new ManagementPost({
      post: this.post,
      comments: this.comments,
      errorMessage: this.errorMessage
    }), this.getBlogManagementElement()[0])
  }

});

很简单，我们获取这篇文章的 cmets，然后渲染这篇文章。请注意，这里我们每 15 秒检查一次新的 cmets 并显示它们。我们使用 react 来渲染成品。

那么问题是什么？

如果您在 #posts 并单击博客标题并转到 #posts/x，您将看到一个带有 cmets 的帖子，太棒了。但是 15 秒后我们闪回到帖子列表，然后 15 秒后又回到带有 cmets 的帖子。它每 15 秒执行一次。在您刷新单个帖子页面上的页面之前，它不会在“中间”停止执行此操作，然后它才会停止来回闪烁。

这是什么原因造成的？这是因为当您通过路由器在骨干网中旅行时，它们不是真正的重定向？我应该使用骨干网Backbone.history.navigate('', {trigger:true})，如果是这样，我该如何传递 ID 之类的东西？还是其他变量？

我正在尝试构建一个“实时”博客管理系统，这个闪烁的问题让我很困惑。

Answer 1

setInterval 返回一个值。当您想停止它时，您需要保留此值并将其传递给 clearInterval。 Backbone 无法自动为您执行此操作。