javascript canvas 更新速度太快按鈕無法反應

javascript

alanotmt 2022-10-25 18:01:48 ‧ 1043 瀏覽

分享至

我有一個canvas 連結API來即時更時地圖狀態，
所以會每500ms 更新一次，我有一個值是常狀默認是false
當我讀到onclick時就會改成true 去取消一些功能，
但每跑一次就會更新為false，導致我週回時間可能來不及去改成true就又被更新為false
請問要如何改善這問題?

除了把更新時間拉長外，因為需要即時，週回時間可能沒辦法讓步....
html:

<button type="button" onclick="turnoff()"  class="setbtn">cancel</button>

javascript:

function turnoff(){
    cancel=true
}

-----canvas--------
var main = function () {
    draw();
};
var draw = function () {
        if (tempMarker.status=='n'){
            tmpcolor = "green"
        }
        if (tempMarker.status=='e'){
            tmpcolor = "red"
        }
}setInterval(main, 200); 

-----------------



--------- API ----------------
function start_run(){
  /** 取到tempMarker.status的值*//
  }
  
  if (tempMarker.status == 'e' && cancel==false){
      /**不更新tempMarker.status的值*/
     }else{
        tempMarker.status == api_value 
     }
  
  setTimeout(start_run, 200);
  cancel=false
}

-------------------------

看更多先前的討論...收起先前的討論...

chan15 iT邦新手 2 級 ‧ 2022-10-26 08:58:57 檢舉

你隨便給個範例都好，因為你的敘述蠻難懂的...

alanotmt iT邦新手 4 級 ‧ 2022-10-26 09:34:00 檢舉

已更新程式碼的部分

froce iT邦大師 1 級 ‧ 2022-10-26 10:07:33 檢舉

我覺得你該做的是檢討目前的流程，有需要全部更新?
每隔500ms去做整個畫面的更新，不卡死才奇怪...

這個你該給大致上，你想做的全貌、地圖更新方式等這些更詳細的資訊才有可能給你建議。

alanotmt iT邦新手 4 級 ‧ 2022-10-26 10:14:51 檢舉

因為那是警報系統，一定要即時，有辦法我觸發按鈕A function時暫停 B function 的更新嗎? 好讓我順利先把警報關閉

alanotmt iT邦新手 4 級 ‧ 2022-10-26 11:10:42 檢舉

解決了，500MS做畫面更新好像還好，因為滿多網頁遊戲刷新畫面應該比這種應用來的快更多吧? 我後來調到200MS 做更新也不會卡死，卡死原因是我白痴把分拆狀態的地方放到API回傳的地方做分拆，我把他獨立拉出來做就不會有卡死的問題

froce iT邦大師 1 級 ‧ 2022-10-26 11:45:42 檢舉

遊戲刷新很多是部分刷新，有些是卷軸移動，狀況不一樣，而且要達到那樣的fps是需要很多的優化機制的。而地圖的底圖照理來說應該不是，你該更新的理論上應該只有某些局部的地方，所以我才會這麼說。

另外你覺得為什麼下面也會問你不是「太忙碌造成使用者操作沒反應」?

不過算了，反正技術債不是我還就好。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

淺水員

iT邦大師 6 級 ‧ 2022-10-25 22:41:36

但每跑一次就會更新為false，導致我週回時間可能來不及去改成true就又被更新為false

這部分要看你程式怎麼設計的才有辦法回答
但程式有寫好的話，應該不會有這樣的問題才對

建議描述一下你的寫法
例如這樣，稍微有個架構才比較好判斷問題在哪

let Foo = {
    flag: false,

    /**
     * 更新 canvas
     * 
     * @param {*} data 從 api 抓的資料
     */
    updateCanvas(data) {
        if (flag) {
            // flag == true 的處理
        } else {
            // flag == false 的處理
        }
    }
}

theButtonElement.addEventListener('click', () => {
    Foo.flag = !Foo.flag;
});

另外有確認過這不是因為「太忙碌造成使用者操作沒反應」嗎？