網頁啟動外接讀卡機效能問題

usb讀卡機網頁 js

卡蹦 2022-05-31 01:12:04 ‧ 540 瀏覽

分享至

專案是金融方面的網站，某個前端功能會需要插入usb讀卡機啟動一個第三方介面(需事先安裝元件)
流程大概是頁面內按下按鈕 > 呼叫元件 > 開啟元件視窗 > 插入usb讀卡機 > 登入元件 > 開始操作元件上的功能

這個元件提供一個js檔，裡面有各種api來接收或呼叫相關功能，
現在的問題是當我啟動這個第三方元件，整個頁面的資源就會被他佔住無法操作，即使是以非同步的方式處理也一樣，猜測因為是在同一個頁面去呼叫這個元件的api，在元件沒結束前都會卡著。

開啟的介面可以正常操作，直到操作結束關閉元件回傳結果後網頁就會正常。

頁面需要接收元件傳回的成功或失敗結果並呈現出來

想請問如何改善效能，例如開啟元件後網頁效能不會被佔住的做法，或是這種功能一般應該怎麼處理比較好，另外專案是以react開發的前後端分離網站，感謝

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

froce iT邦大師 1 級 ‧ 2022-05-31 09:31:23 檢舉

這種弄個 loading circle 擋住就好了吧。
通常這個也是用在處理身分認證/簽證等關鍵事務，要鎖定也蠻正常的。

卡蹦 iT邦新手 5 級 ‧ 2022-05-31 11:09:24 檢舉

了解所以這種元件會鎖住整個網頁不讓操作是正常現象好像蠻合理的不然還能操作亂點的話就跑去別的頁面了

卡蹦 iT邦新手 5 級 ‧ 2022-05-31 11:18:57 檢舉

只是說如果想要在背後做一些js的話也會被卡著，因為元件沒有提供倒數計時的功能專案有個需求需要讓他在特定秒數自動關閉，本來想利用settimeout來做，但是因為卡著就沒辦法了

froce iT邦大師 1 級 ‧ 2022-05-31 14:49:10 檢舉

> 這種元件會鎖住整個網頁不讓操作是正常現象
不是，現在這種元件設計通常都是做成 web service，js 打 http request 到本機，基本上應該也是異步。卡住通常是元件的問題譬如說是用activeX等舊的元件。這是要看元件如何設計才能知道和解決。

但這個問題的確不大是因為我上面說的，其實這些都會是必經的關卡如簽證、登入等，都是需要處理完才能進行下一步的，所以同步異步差異不大，想辦法騙過使用者就行了。