iPad 上的 Safari 不会停止请求动画帧答案

【问题标题】：Safari on iPad won't stop requesting animation framesiPad 上的 Safari 不会停止请求动画帧
【发布时间】：2012-11-16 18:42:25
【问题描述】：

我在 iPad 上使用 Safari 时遇到了一个奇怪的情况。我确实有一个基于 spritesheet 的动画序列，您可以以“乒乓”方式播放：您单击一次，它向前播放直到最后一帧，您单击返回，它再次向后播放，直到到达第一帧。

我使用的 JS 看起来像：

$('.pingpong').each(function(){

    var step = parseInt($(this).width(), 10);
    var frames = parseInt($(this).data('frames'), 10);
    var img = $(this).find('img');
    var running = false;
    $(this).data('playForward', true);

    $(this).bind(interaction, function(){ //interaction is tap on mobiles and click on desktops

        if (!running){

            running = true;
            var lastExecution = new Date().getTime();
            var counter = 1;

            function pingpong(){

                var now = new Date().getTime();

                if (now - lastExecution >= (1000 / config.fps)){ //animation is supposed to run at 12fps

                    img.css('margin-left', $(this).data('playForward') ? '+=' + step + 'px' : '-=' + step + 'px');
                    counter++;
                    lastExecution = new Date().getTime();

                }

                if (counter != frames){

                    requestAnimationFrame(pingpong);

                } else {

                    $(this).data('playForward', !($(this).data('playForward'))); //this change of direction is triggered on iOS as well strangely enough
                    running = false;

                }

            }

            pingpong();

        }

    });

});

这在所有桌面浏览器中都可以正常工作，但 iPad 上的 Safari 不会停止请求动画帧，动画将“溢出”直到图像早已消失（通过其边距），但是当我记录数字或requestAnimationFrame 调用（我正在使用 Paul Irish shim 顺便说一句 - 但如果我使用 webkitRequestAnimationFrame 没有区别）我可以看到递归 pingpong 调用在 iOS 中永远不会停止（在他们所做的桌面上）。另外，尝试cancelAnimationFrame 和id 我的电话没有区别。

我对@987654327@ 的理解有缺陷还是我在这里遗漏了一些不同的东西？ iPad 上的new Date().getTime() 行为有什么不同吗？我目前使用的是基于setInterval 的解决方案，但我真的完全被这种行为所嘲笑，所以我想现在有人可能是我错了？

【问题讨论】：

标签： javascript ios html safari requestanimationframe

【解决方案1】：

尝试以下方法：

$('.pingpong').each(function(){

var step = parseInt($(this).width(), 10);
var frames = parseInt($(this).data('frames'), 10);
var img = $(this).find('img');
var running = false;
$(this).data('playForward', true);

$(this).bind(interaction, function(){ //interaction is tap on mobiles and click on desktops

    if (!running){

        running = true;
        var lastExecution = new Date().getTime();
        var counter = 1;

        function pingpong(){

            var now = new Date().getTime();

            if (now - lastExecution >= (1000 / config.fps)){ //animation is supposed to run at 12fps

                img.css('margin-left', $(this).data('playForward') ? '+=' + step + 'px' : '-=' + step + 'px');
                counter++;
                lastExecution = new Date().getTime();

            }

            if (counter < frames){
                requestAnimationFrame(pingpong);
            } else {
                $(this).data('playForward', !($(this).data('playForward'))); //this change of direction is triggered on iOS as well strangely enough
                running = false;
            }

        }

        pingpong();

    }

});

});

【讨论】：