1

私は、Clojure と Reagent をほとんど経験のない状態で実験しており、単純なタイマーを作成しようとしています。

(defn reset-component [t]
  [:input {:type "button" :value "Reset"
           :on-click #(reset! t 60)}])

(defn countdown-component []
  (let [seconds-left (atom 60)]
    (fn []
      (js/setTimeout #(swap! seconds-left dec) 1000)
      [:div.timer
        [:div "Time Remaining: " (show-time @seconds-left)]
        [reset-component seconds-left]])))

リセット ボタンを押すまで、タイマーのカウントダウンは正しく機能しているように見えます。その後、タイマーは 2 倍の速さでカウントダウンを開始します。リセットボタンを押すたびに、カウントダウンが速くなります。

ページがロードされたときにタイマーが自動的にカウントダウンするようにするにはどうすればよいですか?

4

4 に答える 4

2

私が見つけた解決策は、コンポーネント関数内setIntervalではなく、コンポーネント関数の前に使用することでしたsetTimeout:

(defn reset-component [seconds]
  [:input {:type "button" :value "Reset"
           :on-click #(reset! seconds 60)}])

(defn countdown-component []
  (let [seconds-left (atom 60)]
    (js/setInterval #(swap! seconds-left dec) 1000)
    (fn []
      [:div.timer
       [:div "Time Remaining: " @seconds-left]
       [reset-component seconds-left]])))
于 2015-06-04T23:15:55.863 に答える
1

おそらくこれが必要です：

(defn reset-component [t]
  [:input {:type "button" :value "Reset"
           :on-click #(reset! t 60)}])

(defn countdown-component []
  (let [seconds-left (atom 60)]
    (js/setInterval #(swap! seconds-left dec) 1000)
    (fn []  
      [:div.timer
        [:div "Time Remaining: " (show-time @seconds-left)]
        [reset-component seconds-left]])))

への呼び出しはsetInterval、コンポーネントの初期化時にのみ発生し、レンダリング段階では発生しないことに注意してください。

于 2015-06-03T17:49:18.967 に答える