我正在嘗試將倒計時從 Java 應用程序同步到瀏覽器。倒計時可以隨時停止、開始和重置。我試圖在 Vaadin 13 中實現這一點，但無法訪問 UI 訪問方法來鎖定 vaadin 會話?，F在我正在嘗試使用本機 JS 和 Ajax 請求來實現這一點，但我不確定如何在不每秒發出 ajax 請求的情況下同步停止/啟動和重置事件。這是計數器的 Swing 實現public void timer() { Timer timer = new Timer(1000, new ActionListener() { public void actionPerformed(ActionEvent e) { if (seconds == 0 && minutes > 0) { minutes--; seconds = 59; } else { seconds--; } label.setText(minutes+":"+seconds); repaint(); } }); timer.start(); }現在，我將為 JS 代碼提供一個 Spring Boot Rest API，以詢問剩余的分鐘數和秒數。setInterval(test, 1000);async function test() { var xhttp = new XMLHttpRequest(); xhttp.open("GET", "http://10.0.1.17/countdown", false); xhttp.send(); //console.log(JSON.parse(xhttp.responseText)); //Do Something with it}這似乎是一種不可靠且低效的方式
1 回答
慕森卡
TA貢獻1806條經驗 獲得超8個贊
/*
? ? a (pausable) linear equation over real time
? ? ? ? value = _speed * Date.now() + _offset;
? ? ? ? //when paused, it's simply:?
? ? ? ? value = _offset;
? ? so basically a clock, a stopwatch, a countdown, a gauge, ...
? ? since it is only a linear equation over time, it is independant of any interval.
? ? It computes the value (using Date.now()) whenever you ask for it. Wether this is ever frame or every hour.
*/
class Clock {
? ? constructor(value=Date.now(), speed=1){
? ? ? ? //state; changes only when YOU set one of the properties (value, paused or speed)
? ? ? ? this._offset = +value || 0;
? ? ? ? this._speed = +speed || 0;
? ? ? ? this._paused = true;
? ? ? ? //preparing a simple hook to get notified after the state has been updated (maybe to store the new state in the localStorage)
? ? ? ? this.onStateChange = undefined;
? ? }
? ? get value(){?
? ? ? ? return this._paused? this._offset: this._speed*Date.now() + this._offset?
? ? }
? ? set value(arg){
? ? ? ? let value = +arg || 0;
? ? ? ? let offset = this._paused? value: value - this._speed * Date.now();
? ? ? ? if(this._offset !== offset){
? ? ? ? ? ? this._offset = offset;
? ? ? ? ? ? if(typeof this.onStateChange === "function")?
? ? ? ? ? ? ? ? this.onStateChange(this);
? ? ? ? }
? ? }
? ? get speed(){
? ? ? ? return this._speed
? ? }
? ? set speed(arg){
? ? ? ? let speed = +arg || 0;
? ? ? ? if(this._speed !== speed){
? ? ? ? ? ? if(!this._paused)
? ? ? ? ? ? ? ? this._offset += Date.now() * (this._speed - speed);
? ? ? ? ? ? this._speed = speed;
? ? ? ? ? ? if(typeof this.onStateChange === "function")
? ? ? ? ? ? ? ? this.onStateChange(this);
? ? ? ? }
? ? }
? ? get paused(){
? ? ? ? return this._paused
? ? }
? ? set paused(arg){
? ? ? ? let pause = !!arg;
? ? ? ? if(this._paused !== pause){
? ? ? ? ? this._offset += (pause? 1: -1) * this._speed * Date.now();
? ? ? ? ? ? this._paused = pause;
? ? ? ? ? ? if(typeof this.onStateChange === "function")
? ? ? ? ? ? ? this.onStateChange(this);
? ? ? ? }
? ? }
? ? time(){
? ? ? ? let value = this.value,v = Math.abs(value);
? ? ? ? return {
? ? ? ? ? ? value,
? ? ? ? ? ? //sign: value < 0? "-": "",
? ? ? ? ? ? seconds: Math.floor(v/1e3)%60,
? ? ? ? ? ? minutes: Math.floor(v/6e4)%60,
? ? ? ? ? ? hours: Math.floor(v/36e5)%24,
? ? ? ? ? ? days: Math.floor(v/864e5)
? ? ? ? }
? ? }
? ? valueOf(){
? ? ? ? return this.value;
? ? }? ?
? ? start(){
? ? ? ? this.paused = false;
? ? ? ? return this;? ? ? ??
? ? }
? ? stop(){
? ? ? ? this.paused = true;
? ? ? ? return this;
? ? }
}
我展示這個是因為如果你仔細觀察它，你會發現這個東西的整個狀態由兩個數字和一個布爾值組成，它們只會在你做某事時改變，比如開始/停止它。
實際值是根據該狀態和計算機內部時鐘計算得出的。
因此，如果您在前端和后端之間同步此狀態，它們都會（大部分）同步運行。
為什么大部分？因為在另一端收到新狀態之前有一點延遲。在這幾毫秒內，兩者不同步。一旦另一端更新了它的狀態，它們就會再次同步。
添加回答
舉報
0/150
提交
取消