underscoreJS：_.after和_.each；控制异步流

Question

我正在寻找_.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没有按预期执行。我做错了什么？

提前感谢

Answer 1

我觉得这只是个错误。

您没有调用renderPoin函数，因为代码的这一部分缺少了()括号：

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

更新

我甚至不会认为您的代码甚至没有调用所需的函数。

看看官方文件：

(_.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);