取消订阅Elm

Question

我正在关注Elm指南,我正处于尝试为时钟示例实现"暂停"按钮的位置.在指南中写道:

添加一个按钮以暂停时钟,关闭时间订阅.

我所做的就是paused为模型添加一个属性并在更新函数中使用它.我该如何取消订阅？

module Main exposing (..)

import Html exposing (Html)
import Html.App as App
import Html.Events exposing (onClick)
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Time exposing (Time, second)


main =
    App.program
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }


type alias Model =
    { time : Time
    , paused : Bool
    }


init : ( Model, Cmd Msg )
init =
    ( Model 0 False, Cmd.none )


type Msg
    = Tick Time
    | Toggle


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Tick newTime ->
            if not model.paused then
                ( Model newTime False, Cmd.none )
            else
                ( model, Cmd.none )

        Toggle ->
            ( Model model.time (not model.paused), Cmd.none )


subscriptions : Model -> Sub Msg
subscriptions model =
    Time.every second Tick


clock : Time -> Html Msg
clock time =
    let
        sAngle =
            turns (Time.inMinutes time)

        sHandX =
            toString (50 + 40 * cos sAngle)

        sHandY =
            toString (50 + 40 * sin sAngle)
    in
        svg [ viewBox "0 0 100 100", width "300px" ]
            [ circle [ cx "50", cy "50", r "45", fill "#0B79CE" ] []
            , line [ x1 "50", y1 "50", x2 sHandX, y2 sHandY, stroke "#023963" ] []
            ]


view : Model -> Html Msg
view model =
    let
        btnText =
            if model.paused then
                "Start"
            else
                "Pause"
    in
        Html.div []
            [ clock model.time
           , Html.button [ onClick Toggle ] [ Html.text btnText ]
           ]

Answer 1

我猜你可以Sub.none在subscription暂停时简单地返回你的函数.

如果您选择这样做,那么您可以在Tick函数中恢复 处理程序update.

subscriptions : Model -> Sub Msg
subscriptions model =
    if model.paused
    then Sub.none
    else Time.every second Tick