clojurescript页面定时刷新


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,是调用接口,效果如下:
定时器浏览器log

参考

https://github.com/Day8/re-frame/blob/master/examples/simple/src/simple/core.cljs


评论
  目录