underscoreJS:_.after和_.each;控制异步流

时间:2013-10-03 06:23:49

标签: backbone.js underscore.js

我正在寻找_.after函数来玩它。

var renderPoin = _.after(data.models.length, function() {
 console.log( 'siap' );
 require(["ftscroller"], function () {
   $('.dedo').css('width', $li_width);
    var containerElement, scroller;                                     
    containerElement = document.getElementById('poin-nav');                                             
    scroller = new FTScroller(containerElement, {
       scrollbars: false,
       scrollingY: false,
       snapping: true,
       scrollResponseBoundary: 8,
       scrollBoundary: 0
       //contentWidth: $li_width
    });
  });
});


_.each(data.models, function (poin, i) {
  db.transaction(function(trans) {
        trans.executeSql("insert into piezo_point(id, nama, lat, lng) values(?,?,?,?)", [poin.get('id'), poin.get('nama'), poin.get('lat'), poin.get('lng')]);                                      
  }, self.errorCB, function() {
      self.viewList = new Poin({
            model: poin,
            vent: window.vent
  });
  self.$el.find('#poin-nav ul').append(self.viewList.render().el);
  $li_width += parseInt(self.viewList.$el.css('width'));
  if ( (i+1) === data.models.length){                                                       
    renderPoin;
  }
 });    
}, self);

但上面的renderPoin未按预期执行。我做错了什么?

提前致谢

1 个答案:

答案 0 :(得分:1)

我认为这只是一个错字 您没有调用renderPoin函数,因为您错过了此部分代码中的()括号:

if ( (i+1) === data.models.length){                                                       
    renderPoin;
}

<强>更新
我甚至不会争辩说你的代码甚至没有调用所需的功能 看看the official docs

  

(_。after)...创建功能的版本,该版本仅在首次被调用计数次数后运行。

如果您不相信文档,请尝试在浏览器控制台中运行此简单测试:

var f = _.after(1, function(){});
alert(typeof f); // and be amazed

更新#2
after函数的整个目的是让回调触发逻辑,并在每个循环中调用该函数。 _.after函数决定何时实际调用函数,因此您可能会丢失if ( (i+1) === data.models.length){并将其替换为函数调用:

_.each(data.models, function (poin, i) {
    db.transaction(function(trans) {
        trans.executeSql("insert into piezo_point(id, nama, lat, lng) values(?,?,?,?)", [poin.get('id'), poin.get('nama'), poin.get('lat'), poin.get('lng')]);                                      
    }, self.errorCB, function() {
        self.viewList = new Poin({
            model: poin,
            vent: window.vent
        });
        self.$el.find('#poin-nav ul').append(self.viewList.render().el);
        $li_width += parseInt(self.viewList.$el.css('width'));     
        // just call it!                                            
        renderPoin();
    });    
}, self);