0

こんにちは、タイピング マシンの効果をシミュレートする次のスニペットを見つけました。

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

    $.each(settings.text.split(''), function(i, letter){
        setTimeout(function(){
            $this.html($this.html() + letter);
        }, settings.animDelay * i);
    });
};

これはうまく機能しているようですが、関数がいつ終了したかを知る必要があります。別のパラメーターを追加して、最後に実行しようとしました:

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

    $.each(settings.text.split(''), function(i, letter){
        setTimeout(function(){
            $this.html($this.html() + letter);
        }, settings.animDelay * i
        callback();
    });
};

しかし、プロセスが終了する前に実行されました

このコールバック関数を配置する場所を知るにはどうすればよいですか?

4

2 に答える 2

1

の最後の要素に対してeach呼び出すと、アニメーションが各文字に適用された後にコールバックが呼び出されます

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


    $.each(settings.text.split(''), function(i, letter){
        setTimeout(function(){
            $this.html($this.html() + letter);
            if(i === (settings.text.length -1)) {
                callback();
            }
        }, settings.animDelay * i
    });

};
于 2013-04-23T15:07:05.337 に答える
0

setTimeoutコールバック内の状態を確認します。

$.each(settings.text.split(''), function(i, letter){
    setTimeout(function(i){
        $this.html($this.html() + letter);
        if(i == (settings.text.length -1)){

          callback()

        }
    }, settings.animDelay * i

});
于 2013-04-23T15:11:21.407 に答える