3

我需要视图重新获取集合并每 30 秒重新渲染一次。问题是，一旦我更改页面（没有整页刷新），setInterval 就会保留在内存中并在后台继续重新获取。然而，这种观点早已被破坏。

代码：

define(
    [
        "underscore",
        "collection/system/feed",
        "view/list",
        "text!template/index/system-feed.html"
    ],
    function (_, Collection, ListView, Template) {


        return ListView.extend({


            el:             '<div id="main-inner">',
            collection:     new Collection(),
            loading:        true,
            client:         false,


            initialize: function (options) {

                this.collection.fetch();
                this.collection.on('reset', this.onFetchCollection, this);

                var self = this;
                setInterval(function() {
                    self.collection.fetch();
                }, 30000);
            },


            /*collection is returned, so reset the loading symbol and set the posts to the render*/
            onFetchCollection: function () {
                this.list = this.collection.toJSON();
                this.loading = false;
                this.render();
            },


            render: function () {
                var html = _.template(Template, {loading: this.loading, client: this.client, list: this.list});
                this.$el.html(html);
                return this;
            }
        });
    }
);
4

3 回答 3

9

将timer变量分配给 setInterval 并在关闭视图时将其清除。

initialize: function() {
 this.timer = setInterval(function() {
      self.collection.fetch();
 }, 30000);
},
close: function() {
   clearInterval(this.timer);
}

或者，如果您有一个在关闭视图时调用的自定义原型方法，那么只需包含它，并且应该清除计时器。

但请确保在移至下一页之前清理视图，如果不处理会导致内存泄漏，从而大大降低应用程序的速度。

将事件直接附加到视图总是一个更好的主意，而不是使用amodel或 acollectionlistenTo

代替

this.collection.on('reset', this.onFetchCollection, this);

和

this.listenTo(this.collection, 'reset', this.onFetchCollection);

这样，如果您删除视图，即使是事件绑定也会被处理掉。否则，您将需要显式取消绑定集合上的事件。

只需调用this.stopListening()即可取消绑定视图上的所有事件。

于 2013-08-22T17:51:50.740 回答
0

您可以改用 setTimeout 。它可能看起来像这样。

return ListView.extend({....
    initialize: function() {
       ....
       var self = this;
       self.fetchCollection();
    }
    , fetchCollection: function() {
        var self = this;
        self.collection.fetch();

        this.timeout = setTimeout(function() {
          self.fetchCollection
        }, 30000 );
    }
    , close: function() {
        window.clearTimeout( this.timeout );  
    }
于 2013-08-22T17:54:11.893 回答
0

首先，您需要获取对间隔的引用并将其保存，以便以后停止。setInterval 为此目的返回一个间隔 ID

var self = this;
self.interval = setInterval(function() {
      self.collection.fetch();
   }, 30000);

然后当你想停止它时（我假设你想在取消委托事件事件上停止它，因为听起来你正在隐藏/重新显示视图）

undelegateEvents: function(){
   clearInterval(this.interval);
}
于 2013-08-22T17:55:23.167 回答