Question

请耐心等待这一点，因为我解释这个问题有点棘手。所以我分配了多个可观察量，比如说： -

var self = this;
self.amount = ko.observableArray();
self.data0 = ko.observable([10,11,12]);
self.data1 = ko.observable([1,2,3]);
self.data2 = ko.observable([3,4,5]);
self.data3 = ko.observable([6,7,8]);
self.data4 = ko.observable([9,10,11]);

并且有一些按钮可以使用以下函数更改每个函数的值（这些函数的作用并不重要，它只是表明在observable中发生了一些变化）

self.bindOneByOne = function(){
    var self = this;
    var i = 0;
    while(self['data' + i]){
        for(var j = 0, len = self['data'+i]().length; j < len; j++){
            self['data'+i]()[j] *= 2; 
        }
        self.amount.push(i);
        i++;
        }
};

现在我想要做的是在我调用一个函数时，在UI端，一次一个地显示更改（第一个self.data0，然后是data1，依此类推......）在这种情况下的按钮）

到目前为止，我尝试了这种行为： -

self.changeValues = function(){
    var i = 0;
    while(self['data' + i]){
        setTimeout(self['data' +i].valueHasMutated,1000);
        i++;
    }
}

我的代码首先应该首先绑定self.data0，不应该立即反映在我的UI上吗？目前，我只是一次看到变化，这不是我想要的行为。

这是我正在尝试做的fiddle。（单击填充/更改以填充数据并在填充后更改它...然后变制以查看UI侧的更改。您还可以看到按下填充/更改按钮时数据确实在变化在点击Mutate按钮之前检查你的控制台）

Answer 1

超时的关键是使用IEFE（立即调用的函数执行）捕获闭包中的循环值（i和J）

                for(var j = 0, len = self['data'+i]().length; j < len; j++){
                    (function(){
                        //this captures the item to set using the current value of i and J
                        var itemToSet = self['data'+i]()[j];
                        setTimeout(function(){
                            console.log('itemToSet',itemToSet());
                            itemToSet(itemToSet() * 2);
                        },1000*(i+1));
                    })() //the () brackets immediately invoke this function that is also in brackets
                }
                self.amount.push(i);

我已经创建了一个小提示来显示它的工作，你只需要1个按钮就可以显示它，我只是让第二个按钮单独更新每个项目，而不是第一个按钮所做的数组中的所有值。

Fiddle here

希望它有所帮助。

在淘汰赛中为多个观察者分配超时/休息时间

1 个答案: