无法停止动画答案

【问题标题】：Trouble stopping animation无法停止动画
【发布时间】：2015-12-18 10:16:51
【问题描述】：

我正在尝试在 HTML5 中制作一种打字效果。为了渲染和整合，我使用了这个pixi.js 插件。

到目前为止，我已经能够使其工作（部分），尽管负责更新我的 PIXI.TEXT 对象内的文本的 update() 方法似乎不愿意停止动画间隔。

请在下面查看更多信息。

RPGtext.js

define(['pixi', 'jquery'], function (PIXI, $){
    var RPGText = (function(text, style,  pos) 
    {
        var self = this; 
        var default_style =  {
            font : 'bold 36px Arial',
            fill : '#FFF',
            stroke : '#4a1850',
            strokeThickness : 5,
            dropShadow : true,
            dropShadowColor : '#000000',
            dropShadowAngle : Math.PI / 6,
            dropShadowDistance : 6,
            wordWrap : true,
            wordWrapWidth : 440
        };

        var config = {
            update_interval : 30 //// Miliseconds ////
        };

        self.cur_pos = 1;

        var _construct = function(){
            var font_style = $.extend({}, default_style, style);
            _init(font_style);
        };

        var _init = function(font_style){
            self.model = new PIXI.Text(text.substring(0, config.cur_pos), font_style);
            self.model.x =  pos.x;
            self.model.y = pos.y;
            update(self.cur_pos, (text.length - 1) );
        };

        var update = function (x, y) {
            if( self.cur_pos <= text.length){ //// this condition is not making it all stop for some reason /// 
                requestAnimationFrame(update);
                self.cur_pos  = (self.cur_pos + 1);
                self.model.text = text.substring(0, config.cur_pos);
            }else{
                console.log("Stopping"); /// IS nto triggered at all..///
            }
        };

        _construct();

        return self.model;
    });

    return RPGText;
});

//// 这就是它的初始化/使用方式 ///

MsgBozx.js

....
    var text = new RPGText(msg.text, config.font.text.style, config.font.text.pos);

    msgbox.addChild(text);

...

我已经测试了self.cur_pos 和text.length 的输出（使用console.info()）。两者都显示出预期的结果，尽管更新从未停止。

有什么想法可能是错误的吗？

【问题讨论】：

标签： javascript html html5-canvas pixi.js

【解决方案1】：

我认为我的代码中某处缺少requestAnimationFrame()，或者一定是缓存中存储了一些东西导致了奇怪的行为。就像今天我运行代码时一样，一切都运行良好。

虽然我也改变了更新文本的方式（参见下面的 jfiddle 示例）。

JSFiddle

【讨论】：