Question

我有一个模仿打字机效果的jQuery函数，我在.mouseup()处理程序函数上调用它。

现在，如果用户非常快地释放.mouseup() 2次，打字机效果会翻倍，并输入类似这样的内容：“ttyyppeewwrriitteerr eeffffeecctt”。

很高兴知道它何时完成输入并在键入时禁用鼠标交互。

这是我的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'
    });
});

提前致谢！

Answer 1

使用忙碌标志

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

    }
})();

Answer 2

您可以在键入时使用data属性标记元素，并在完成后取消标记。您修改过的代码：

$.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'
        });
    }
});

如果已经输入，则禁用打字机功能

2 个答案: