代码不是从 go 块调用的,但它可以从 REPL 运行

Code not called from go block, but it works from REPL

我有更新 DOM 的代码。 new-recipe! 调用 API 来获取新的配方字符串。 update-recipe-state 接下来在屏幕中更新此状态。最后我们调用了 update-transition-buttons.

(defn- add-listener-to-recipe-button! []
  "Listens to go button, creates a new recipe and displays it"
  (create-click-event-listener! (dommy/sel1 :#button-start)
                                #(go (new-recipe!)
                                     (<! (timeout 2000))
                                     (update-recipe-state!)
                                     (<! (timeout 2000))
                                     (update-transition-buttons! "onboarding"))))

;; define your app data so that it doesn't get over-written on reload
(defonce world
  (add-listener-to-recipe-button!))

update-transition-buttons在步骤之间有一些延迟(使用超时代码here)如下所示:

(defn- update-transition-buttons! [recipe-name]
  "Updates the buttons with the transition names"
  (go
    ;; Split response in list of actions by splitting on the comma
    (let [response (<! (http/get (get-recipe-transitions-url recipe-name)))
          transition-names (clojure.string/split (:body response) ",")]
      (go (update-buttons! transition-names)
          (<! (timeout 2000))
          (js/console.log transition-names)
          (set-button-event-handlers! transition-names)))))

因此它将响应拆分为一个字符串。 updates-buttons 通过添加一些按钮(这是可见的)更改页面上的状态。再次出现超时,然后我想 将事件处理程序添加到按钮 。这就是问题所在。

创建事件侦听器(也包含 console.log)的例程如下所示:

(defn- listen-to-transition-button! [name]
  "Creates click event listener on button (button HTML ID should be name)"
  (do (js/console.log (str "Listening to " name))
    (let [name-without-spaces (clojure.string/replace name " " "")
          button (dommy/sel1 (keyword (str "#" name-without-spaces)))
          action #(do (perform-action! name)
                      (update-recipe-state!))]
      (create-click-event-listener! button action))))

(defn- set-button-event-handlers! [names]
  "Creates click event listeners on the buttons (button ID should be name)"
  (map listen-to-transition-button! names))

您再次看到一条 console.log 消息,它应该针对传递的每个元素发生。我在 Firefox 控制台中得到的输出是:

[FIRST SERVICE CALLED]
[NEXT SERVICE CALLED]
[DISPLAY LIST OF STEPS]: ["Step1", "Step2", "Step3"]

我期望的是:

[FIRST SERVICE CALLED]
[NEXT SERVICE CALLED]
[DISPLAY LIST OF STEPS]: ["Step1", "Step2", "Step3"]
Listening to Step1
Listening to Step2
Listening to Step3

因此由于某些原因没有添加事件处理程序(取决于之前步骤中生成的 HTML)并且没有显示 console.log 消息。

当我从 REPL 调用相同的代码时,我确实看到了输出,即:

repl=> (set-button-event-handlers! ["Step1","Step2", "Step3"])
(#object[Object [object Object]] #object[Object [object Object]] #object[Object [object Object]])

控制台输出为:

Listening to Step1
Listening to Step2
Listening to Step3

为什么 set-button-event-handlers! 可以从 REPL 调用,但不能在 update-buttons 之后的 update-transition-buttons 方法中调用?

看起来问题出在这里:

(map listen-to-transition-button! names)

set-button-event-handlers!

它创建了一个惰性序列,元素只有在代码中的某处使用后才会被实现(这永远不会发生),但是当你在 repl 中调用它时,它会被完全实现以在输出中显示所有元素.尝试将此行更改为:

(doall (map listen-to-transition-button! names))