8

我认为 RxJS 应该非常适合抑制重复按钮点击 2 秒。但是，我正在努力实施。

var $button = $('#myButton').button();
$button
    .toObservable("click")
    //.Throttle(2000) // Wouldn't fire the first event instantly :-(
    .Subscribe(function(){ alert('clicked'); });

为了您的方便，我已经创建了一个 jsFiddle。你需要在这个小提琴中向下滚动，因为我只是在里面粘贴了 Rx，因为我找不到 CDN。

http://jsfiddle.net/cburgdorf/mUMFA/2/

4

5 回答 5

5

我将 Sergeys 的答案转换为 JavaScript，并认为这应该是最后的方法。

var $button = $('#myButton').button();
    $button
        .toObservable("click")
        .Take(1)
        .Merge(Rx.Observable.Empty().Delay(2000))
        .Repeat()
        .Subscribe(function(){ console.log('clicked'); }

据我了解，这种解决方案实际上更好，因为它不依赖于副作用，这使得它在可组合性方面更加出色。

正如 Sergey 指出的那样，您甚至可以更进一步，像这样实现自己的组合器：

Rx.Observable.prototype.OneInTime = function(delay){
 return this
        .Take(1)
        .Merge(Rx.Observable.Empty().Delay(delay))
        .Repeat();
};

所以我们上面的例子可以简化为：

var $button = $('#myButton').button();
    $button
        .toObservable("click")
        .OneInTime(2000)
        .Subscribe(function(){ console.log('clicked'); });
于 2011-03-07T18:51:10.070 回答
3

这就是我在 RxNet 中的做法（抱歉，我不熟悉 RxJS，所以不确定是否有可能）：

    public static IObservable<T> SupressDoubleClicks<T>(
        this IObservable<T> source, TimeSpan delay)
    {
        return source
            .Take(1)
            .Merge(Observable.Empty<T>().Delay(delay))
            .Repeat();
    }
于 2011-03-06T01:19:32.173 回答
2

实际上，Rx 团队的 Matthew 非常好心地通过推特向我发送了答案：http: //twitter.com/# !/mattpodwysocki/status/43731812513624064

所以，你可以做的是：

var $button = $('#myButton').button();
$button
    .toObservable("click")
    .Do(function(){ 
        alert('clicked'); 
        $button.button('disable'); 
    })
    .Delay(2000)
    .Do(function(){ $button.button('enable'); })
    .Subscribe();

http://jsfiddle.net/cburgdorf/mUMFA/5/

但是：出于锻炼原因。我宁愿在不设置启用/禁用的情况下使其工作，而只是在第一次发生后将事件抑制 2 秒

在大理石演讲中，我正在寻找这个：

O 流：X---X---X---X---X---X---X

接收流：X------------X------------X

于 2011-03-04T18:47:03.633 回答
0

疯狂美味！

我得到了它：

var $button = $('#myButton').button();
$button
    .toObservable("click")
    .Do(function(){ console.log('clicked'); })
    .Take(1)
    .Delay(2000)
    .Repeat()
    .Subscribe()
于 2011-03-05T21:05:42.193 回答
0

我从这个线程中学到了很多，实际上疯狂美味的迭代是迄今为止最干净的。但我想返回一个可组合的事件流——就像转换后的 Sergeys answer一样。所以这是我的方法...

Rx.Observable.prototype.throttleOnFirst = function(ms){

    var subject = new Rx.Subject();

    var throttler = this
        .do(function(data){subject.onNext(data)})
        .take(1)
        .delay(ms)
        .repeat()
        .subscribe()

    return subject;
};

我的是有角度的，所以我像这样使用它......

var goToChaseTrigger = $scope.$createObservableFunction('goToChase');
var throttleAfterFirst = goToChaseTrigger
    .throttleOnFirst(2000)
    .subscribe(function(d){console.log('throttleOnFirst>',d)})
于 2014-12-12T20:08:15.797 回答