jquery - 我的jquery动画完成后如何运行一个函数

Question

我正在做一个 jquery 类型的写作效果，并在打字文本 jquery 动画完成后运行一个函数

我如何检测到最后一条消息已打印并执行诸如警报之类的功能

这是我的代码 http://jsfiddle.net/dnkwp/28/

var where, when, iteration; //added
iteration = 0;
bigDelay = 0;
$.fn.teletype = function (opts) {
    iteration++;
    var $this = this,
        defaults = {
            animDelay: 50
        }, settings = $.extend(defaults, opts);
    var letters = settings.text.length; //added
    where = '#' + $($this).attr('id'); //added
    when = settings.animDelay; //added
    if (iteration > 1) {
        bigDelay = bigDelay + settings.text.length * settings.animDelay;
        setTimeout(function () {
            $.each(settings.text, function (i, letter) {
                setTimeout(function () {
                    $this.html($this.html() + letter);
                }, settings.animDelay * i);
            });
        }, bigDelay);
    } else {
        $.each(settings.text, function (i, letter) {
            setTimeout(function () {
                $this.html($this.html() + letter);
            }, settings.animDelay * i);
            //alert($('#container4').html().length);
        });
    }
};
$(function () {
    $('#container1').teletype({
        animDelay: 100,
        text: 'This is message 1'
    });
    $('#container2').teletype({
        animDelay: 100,
        text: 'this is message 2'
    });
    $('#container3').teletype({
        animDelay: 100,
        text: 'this is message 3'
    });
    $('#container4').teletype({
        animDelay: 100,
        text: 'this is message 4'
    });
});
if ($('#container4').html().length == 17) {
    alert("test")
} //this not work with me

Answer 1

我会添加一个或多个回调选项，使您的设置哈希看起来像：

{
  animDelay: 100,
  text: 'this is message 4',
  after: function (text) {
     alert($(this).attr('id') + ' teletype completed: ' + text);
  },
  afterChar: function(ltr, ltrIndex, text) {
     console.log('typed "'+ ltr + '" - character '+ ltrIndex + '/' + text.length + ' in "' + text +'"');
  }
}

因此，要实现回调，您将执行以下操作：

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

    var letters = settings.text.length; //added
    where = '#' + $($this).attr('id'); //added
    when = settings.animDelay; //added

    if (iteration > 1) {
        bigDelay = bigDelay + settings.text.length * settings.animDelay;
        setTimeout(function () {
            $.each(settings.text, function (i, letter) {
                setTimeout(function () {
                    $this.html($this.html() + letter);

                    // if we have a settings.afterChar function execute it,
                    // binding 'this' to the container element and sending along
                    // pertinent arguments
                    if(typeof settings.afterChar == 'function') {
                       settings.afterChar.apply($this, [letter, i, settings.text]);
                    }

                    // if this is the last character and we have  settings.after function
                    // then execute it, binding it to the container element and sending along
                    // pertinent arguments
                    if(i+1 === settings.text.length && typeof settings.after == 'function') {
                       settings.after.apply($this, [settings.text]);
                    }
                }, settings.animDelay * i);
            });
        }, bigDelay);
    } else {
        $.each(settings.text, function (i, letter) {
            setTimeout(function () {
                $this.html($this.html() + letter);

                    // if we have a settings.afterChar function execute it,
                    // binding 'this' to the container element and sending along
                    // pertinent arguments
                if(typeof settings.afterChar == 'function') {
                   settings.afterChar.apply($this, [letter, i, settings.text]);
                }

                 // if this is the last character and we have  settings.after function
                 // then execute it, binding it to the container element and sending along
                 // pertinent arguments
                if(i+1 === settings.text.length && typeof settings.after == 'function') {
                   settings.after.apply($this, [settings.text]);
                }
            }, settings.animDelay * i);
        });
    }
};

修改过的小提琴：http: //jsfiddle.net/gjCLh/

Answer 2

I would pass a callback as argument and test if the text length has been reach

http://jsfiddle.net/dnkwp/34/

$('#container3').teletype({
    animDelay: 100,
    text: 'this is message 3'
});
$('#container4').teletype({
    animDelay: 100,
    text: 'this is message 4',
    callback : function () {
        alert('coucou')
    }
});

//Your plugin
....
    $.each(settings.text, function (i, letter) {
        setTimeout(function () {
            $this.html($this.html() + letter);
            if ((settings.callback != null)&&(i == settings.text.length-1))
                settings.callback();
        }, settings.animDelay * i);
    });
....