1

タイプライター効果をエミュレートするjQuery関数があり、.mouseup()ハンドラー関数で呼び出されています。

ここで、ユーザーが2倍の.mouseup()速さでリリースすると、タイプライター効果が2倍になり、「ttyyppeewwrriitteerreeffffeecctt」のように入力します。

タイピングがいつ完了したかを知り、タイピング中はマウス操作を無効にすると便利です。

これが私のjQuery関数です：（http://jsfiddle.net/MARm2/1/）

//Typewriter Effect
$.fn.Typewriter = function(opts){
    var $this = this,
        defaults = { animDelay: 50 },
        settings = $.extend(defaults, opts);
    $.each(settings.text, function(i, letter){
        setTimeout(function(){
            $this.html($this.html() + (letter!='\n'?letter:'<br />'));
        }, settings.animDelay * i);
    });
}

.mouseup()ハンドラー関数は次のとおりです。

$('#game_howto').mouseup(function(e) {
    $('#game_howto_slide1').Typewriter({
        animDelay: 50,
        text: 'Typewriter effect'
    });
});

前もって感謝します！

4

2 に答える 2

2

ビジーフラグを使用する

var Typewriter = (function(){
    var busy=false;
    return function(opts){
        if(busy){
           ...       // nothing
        }
        else{
           busy = true;
           ...       // something
           busy = false
        }

    }
})();
于 2012-12-13T22:10:08.673 に答える
2

入力中にデータ属性で要素にマークを付け、入力が終わったらマークを外すことができます。変更したコード：

$.fn.Typewriter = function(opts){
    var $this = this,
        defaults = { animDelay: 50 },
        settings = $.extend(defaults, opts);

    $this.data('typing', true); // we are typing!

    $.each(settings.text, function(i, letter){
        setTimeout(function(){
            $this.html($this.html() + (letter!='\n'?letter:'<br />'));

            if (i == settings.text.length  - 1) {
                $this.data('typing', null); // this is the last letter, we are done typing!
            }
        }, settings.animDelay * i);
    });
}

$('#game_howto').mouseup(function(e) {
    if (!$('#game_howto_slide1').data('typing')) { // only run if not typing
        $('#game_howto_slide1').Typewriter({
           animDelay: 50,
            text: 'Typewriter effect'
        });
    }
});
于 2012-12-13T22:21:39.283 に答える