clojurescript 页面定时器
场景
最近做蓝牙设备的连接,需要在app上实时显示蓝牙的读数,毕竟只有使用设备的时候才要求实时性,简易期间我们使用服务端通信,或者socket这种双向通信的,直接在页面时定时刷新
代码
(require '[reagent.core :as r])
(require '[re-frame.core :as rf])
(defn dispatch-timer-event
[]
(let [now (js/Date.)]
(rf/dispatch [:timer now])))
(defonce do-timer (js/setInterval dispatch-timer-event 1000))
(rf/reg-event-db
:timer
(fn [db [_ new-time]]
(prn "<<<<< this is a test log >>>>>" (str new-time))
(assoc db :time new-time)))
停止
停止一个interval使用如下操作
(r/render-component (r/create-element "button"
#js {:onClick #(. js/window (clearInterval do-timer))}
"停止刷新"
) js/klipse-container)
划重点:定时任务启动后必须找到对应的才能停止掉,在实际开发的过程中,你也一定不希望单页面的应用,只要定时任务启动了,关闭了当前页定时任务还在执行着,一定是要找到某个合适的契机停止掉的。
我们是这样实现的,一个按钮控制跳页同时启动定时任务,setInterval的返回值用atom或者db保存起来。
页面退出,或者其他button有操作时,调用clearInterval将atom或者db里订阅的interval停止掉。
效果
实际使用中我们当然不是只打个log,是调用接口,效果如下:
参考
https://github.com/Day8/re-frame/blob/master/examples/simple/src/simple/core.cljs