Question

我创建了一个节拍器，使用Nativescript Slider（https://docs.nativescript.org/angular/code-samples/ui/slider.html）来设置速度（间隔）。

此代码工作正常（速度实时正确更改）：

app.component.html

<Slider #sl minValue="10" maxValue="350" [(ngModel)]="interval" (valueChange)="setInterval(interval)" row="0" col="1"></Slider>

app.component.ts

public metronome = sound.create("~/pages/metronome/click.mp3"); 
public interval: number = 120;
public timer: number;

start(){
    this.stop(); // Stop previous metronome
    this.tick();
}

stop() {
    clearTimeout(this.timer);
}

setInterval(interval: number) {
    this.interval = interval; 
}

public tick() {
    console.log("Tick");
    this.metronome.play();
    this.timer = setTimeout(this.tick.bind(this), this.interval);
}

但是使用上面的代码，节拍器使用ms（毫秒）而不是bpm（每分钟节拍）。音乐家希望在BPM中设置节拍器。

因此：ms = 60'000 / BPM（请参阅=＆gt; this.plainInterval）

setInterval(){
    this.plainInterval = 60000 / this.interval;
}

public tick() {
    console.log("Tick");
    this.metronome.play();
    this.timer = setTimeout(this.tick.bind(this), this.plainInterval);
}

现在我的问题：当我使用滑块时，该值无法正确更新。

i.E。：滑块默认值为120.好的。然后我滑到60.该值仍然保持在120 ...然后我滑到200并且现在值跳到120.我可以继续并滑动到10，现在它是200。

SO：问题是，它检索旧值。而作为一个新的价值，旧的一个被触发。

如何同步plainInterval和interval来解决问题？

Answer 1

我解决了这个问题！ this.interval通过[(ngModel)]="interval"进行双向数据绑定。这意味着我无法使用this.plainInterval，因为它与this.interval的双向数据绑定没有直接关联。我首先尝试使用Pipe，但不允许使用2-Way-Databinding [(ngModel)]。因此，我使用了我的原型（但工作）代码（我在开头提供），并且只调整了this.timer中setTimeout的值。这是工作代码：

start(){
        this.stop();
        console.log("START: " + this.interval);
        this.tick();
    }

stop() {
    clearTimeout(this.timer);
}

setInterval(interval: number) { // This function isn't required
    this.interval = interval; 
}

public tick() {
    console.log("Tick");
    this.metronome.play();
    this.timer = setTimeout(this.tick.bind(this), 60000/this.interval); // This was the only change needed: 60'000 / this.interval 
}

Nativescript滑块值延迟

1 个答案: