Nativescript Slider Value Delayed

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（見=> 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 .: slider-default是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 
}