Elm lang 0.17でデバック自動保存を実装する方法は？

Question

私は次のようなシナリオを持っています：

ユーザーがテキスト領域での入力をやめると2秒待ってから2秒以内にテキスト領域の内容を変更しない場合は保存しますサーバーへのテキストエリアの内容ユーザーが2秒以内にテキストエリア内の何かを変更した場合は、待機タイムアウトを再開します。 JavaScriptで

動作を実現するために、この

http://codepen.io/ondrejsevcik/pen/LRxWQP

// Html 
<textarea id="textarea"></textarea> 
<pre id="server"></pre> 

// JavaScript 
var textarea = document.querySelector('#textarea'); 

var textValue = ""; 
textarea.oninput = function (e) { 
    textValue = e.target.value; 
    setSaveTimeout(); 
} 

let saveTimeout; 
function setSaveTimeout() { 
    if (saveTimeout) { 
    clearTimeout(saveTimeout); 
    } 
    saveTimeout = setTimeout(saveToServer, 2000); 
} 

function saveToServer() { 
    document.querySelector('#server').innerText = 
    'Value saved to server: ' + textValue; 
} 

Answer 1

一つの方法は...

1. がonInput内onInputイベント
2. をフックすることであるように、私はそれに何かを実装しますハンドラ、 res 2秒後に、 に現在のtextareaの値を設定します。 テキストエリアの内容も保存してください。
3. 値が に変更されているかどうかをチェックし、値が変更されていない場合は保存します。

ここではTaskがキャンセルされないため、効率的でない可能性があります。

-- MODEL 
type alias Model = 
    { str : String 
    , saved : String 
    } 

init : (Model, Cmd Msg) 
init = 
    (Model "" "", Cmd.none) 

-- UPDATE 
type Msg 
    = ChangeText String 
    | Save String 
    | NoOp() 

update : Msg -> Model -> (Model, Cmd Msg) 
update msg model = 
    case msg of 
    NoOp _ -> (model, Cmd.none) 
    Save str -> 
     let 
     _ = Debug.log "save" str 
     newmodel = 
      if model.str /= str 
      then model 
      else { model | saved = str } 
     in (newmodel, Cmd.none)  
    ChangeText str -> 
     let 
     _ = Debug.log "textarea" str 
     cmd = Task.perform NoOp Save <| 
      Process.sleep (2 * Time.second) 
      `Task.andThen` 
      \_ -> Task.succeed str 
     in ({ model | str = str }, cmd) 

-- VIEW 
view : Model -> Html Msg 
view model = 
    Html.div [] 
    [ Html.textarea [ onInput ChangeText ] [] 
    , Html.div [] [ Html.text <| "saved: " ++ model.saved ] 
    ]