我正在嘗試將倒計(jì)時(shí)從 Java 應(yīng)用程序同步到瀏覽器。倒計(jì)時(shí)可以隨時(shí)停止、開(kāi)始和重置。我試圖在 Vaadin 13 中實(shí)現(xiàn)這一點(diǎn)，但無(wú)法訪問(wèn) UI 訪問(wèn)方法來(lái)鎖定 vaadin 會(huì)話?，F(xiàn)在我正在嘗試使用本機(jī) JS 和 Ajax 請(qǐng)求來(lái)實(shí)現(xiàn)這一點(diǎn)，但我不確定如何在不每秒發(fā)出 ajax 請(qǐng)求的情況下同步停止/啟動(dòng)和重置事件。這是計(jì)數(shù)器的 Swing 實(shí)現(xiàn)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(); }現(xiàn)在，我將為 JS 代碼提供一個(gè) Spring Boot Rest API，以詢(xún)問(wèn)剩余的分鐘數(shù)和秒數(shù)。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貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超8個(gè)贊
/*
? ? 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;
? ? }
}
我展示這個(gè)是因?yàn)槿绻阕屑?xì)觀察它，你會(huì)發(fā)現(xiàn)這個(gè)東西的整個(gè)狀態(tài)由兩個(gè)數(shù)字和一個(gè)布爾值組成，它們只會(huì)在你做某事時(shí)改變，比如開(kāi)始/停止它。
實(shí)際值是根據(jù)該狀態(tài)和計(jì)算機(jī)內(nèi)部時(shí)鐘計(jì)算得出的。
因此，如果您在前端和后端之間同步此狀態(tài)，它們都會(huì)（大部分）同步運(yùn)行。
為什么大部分？因?yàn)樵诹硪欢耸盏叫聽(tīng)顟B(tài)之前有一點(diǎn)延遲。在這幾毫秒內(nèi)，兩者不同步。一旦另一端更新了它的狀態(tài)，它們就會(huì)再次同步。
添加回答
舉報(bào)
0/150
提交
取消