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); 
} 

しかし、上記のコードでは、メトロノームはbpm（ビート/分）の代わりにms（ミリ秒）を使用します。ミュージシャンは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 .:スライダのデフォルトは120です。私は60にスライドします。値はまだ120にとどまっています...そして、私は200にスライドし、今度は値が120にジャンプします。私は10にスライドし、200になります。

次のとおりです。古い値を取得することを示します。新しい価値を設定すると、古いものが引き起こされます。

plainIntervalとintervalを同期させて問題を解決するにはどうすればよいですか？

Answer 1

私はこの問題を解決しました。 this.intervalは、双方向データバインディング[(ngModel)]="interval"を持っています。つまり、それはthis.intervalの双方向データバインディングに直接接続されていないため、私はthis.plainIntervalを使用できません。 最初にパイプを使用しようとしましたが、2ウェイ・データバインディング[(ngModel)]では使用できません。したがって私はプロトタイプ（ただし動作​​している）コード（私が最初に提供したもの）を使用して、のsetTimeoutの値のみを調整しました。あなたは、コードのデバッグを支援することはできません - あなたは、実際に問題があるslider` `この神話への参照を持っていないコードを掲載しているように見える - 私はslider`を使用すると、`

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 
}