Процесс нокаута foreach в кусках с таймаутом между

Question

Я пытаюсь реализовать дросселируемое обновление пользовательского интерфейса с нокаутом, то есть разделить цикл на куски с некоторым временным интервалом между ними, чтобы дать браузеру некоторую комнату для передышки, чтобы быть более отзывчивой на больших массивы.

Вот что я имею прямо сейчас. Моя проблема в том, что она, кажется, застревает в бесконечном цикле. Возможно, из-за отслеживания зависимостей. Что мне не хватает?

$(function(){ 
    var ViewModel = function(){ 

    this.items = ko.pureComputed(function(){ 
     var observable = ko.observableArray(), 
      items = []; 

     for(var i = 0; i < 100; i++) { 
     items.push({ text: Math.random().toString(36).substring(7) }); 
     } 
     throttledPush(observable, items); 

     return observable(); 
    }, this); 

    }; 

    ko.applyBindings(new ViewModel()); 
}); 

function throttledPush(obsArray, array, items, timeout) { 
    items = items || 5; 
    timeout = timeout || 500; 
    var cancel = false; 

    var i = 0; 

    function addItems() { 
    if (cancel) return; 

    obsArray.valueWillMutate(); 
    for (var j = 0; j < items && i < array.length; ++j && ++i) { 
     console.log('push'); 
     obsArray().push(array[i]); 
    } 
    obsArray.valueHasMutated(); 
    if (i < array.length) setTimeout(addItems, timeout); 
    } 
    addItems(); 

    return { 
    cancel: function() { 
     cancel = true; 
    }, 
    }; 
} 

https://jsfiddle.net/h6d4dfsc/

Answer 1

Я не понимаю, почему ваш items свойство должно быть ko.pureComputed. Вы можете заменить его самостоятельно выполняет функцию, которая возвращает обычный observable и все, кажется, работает нормально:

this.items = (function(){ 
    var observable = ko.observableArray(), 
     items = []; 

    for(var i = 0; i < 100; i++) { 
    items.push({ text: Math.random().toString(36).substring(7) }); 
    } 
    throttledPush(observable, items); 

    return observable; 
}()); 

Если вы хотите, чтобы это было многоразовые, я рекомендую использовать расширитель.

Я не полностью прочитал фактический код дроссельной заслонки ... Мне просто показалось, что рассчитанная может быть актуальной проблемой. Если вы все еще возникают проблемы, дайте мне знать: я мог бы провести еще некоторое время на чтение через другие части кода, а :)

Обновлено скрипку здесь: https://jsfiddle.net/9rqxo2p5/

Answer 2

решаемые подписавшись на вычисленное и заполнение наблюдаемого массива в обратном вызове подписки.