LoginSignup
4

More than 5 years have passed since last update.

Bacon.jsで"ダブルクリック"イベントのストリーム

Last updated at Posted at 2015-02-26

掻い摘んで言うと

RxJSのコード(dblclk.js)

最初は素直にRxJSでコードを書いてみた。

function main() {
    var Rx = require('rx');

    var target = document.getElementById('btn');
    var clicks = Rx.Node.fromEvent(target, 'click');
    clicks
        .buffer(clicks.throttle(250))
        .map(function(xs) { return xs.length; })
        .filter(function (n) { return n === 2; })
        .subscribe(function() { target.innerText = ++target.value; });
}

window.addEventListener('DOMContentLoaded', function() {
    main();
});

てきとーなindex.htmlを用意。

<doctype html>
<html>
    <head>
        <title>Clicker</title>
        <script src='bundle.js'></script>
    </head>
    <body>
        <button id="btn">0</button>
    </body>
</html>

requireを使っているのでbrowserifyを使ってbundle.jsにまとめる。

browserify -o bundle.js dblclk.js

んで、http-serverを起動する。入ってなければ、

npm i -g simple-http-server

で、インストールしてから、

start http-server

※Windowsを使ってなかったらstartは無視してください。

これで、http://localhost:8080/ にアクセスして、ボタンをダブルクリックするとカウントアップされるデモが見れます。

Bacon.jsに書き換えてみる

まずは、インストール。

npm i baconjs

RxJSとイベントストリームの取得の仕方が違うみたい。

    var clicks = Bacon.fromEvent(target, 'click');

こんな感じ。

ダブルクリックイベントストリームの胆はこの部分だけど、

        .buffer(clicks.throttle(250))

Bacon.jsにもbuffer、throttleメソッドがあるので、とりあえずこのままにして実行。動きません。シグネチャを調べてみたらRxJSとは違っていたので順番を入れ替えたり色々試してみた。が、ダメ。

で、正解は

function main() {
    var Bacon = require('baconjs').Bacon;

    var target = document.getElementById('btn');
    var clicks = Bacon.fromEvent(target, 'click');
    clicks
        .bufferWithTime(250)
        .map(function(xs) { return xs.length; })
        .filter(function (n) { return n === 2; })
        .subscribe(function() { target.innerText = ++target.value; });
}

window.addEventListener('DOMContentLoaded', function() {
    main();
});

あれ?butterとかthrottleとかはどこへ行った?

        .bufferWithTime(250)

そもそも使うメソッドが違ったという。

結論:ライブラリのドキュメントはちゃんと読め。(前回と同じオチな気がする)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4