Javascript iPad上的Safari赢得了'；不要停止请求动画帧

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

我使用的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

也没有什么区别

我对

requestAnimationFrame

的理解是否有缺陷，或者我在这里遗漏了一些不同的东西？在

newdate（）.getTime（）中是否有差异

iPad上的行为？我目前使用的是基于

setInterval

的解决方案，但我真的被这种行为完全嘲笑了，所以我想现在可能有人认为我错了？

尝试以下方法：

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

    }

});

$（'.pingpong'）。每个（函数（）{
var step=parseInt（$（this）.width（），10）；
var frames=parseInt（$（this）.data（'frames'），10）；
var img=$（this.find（'img'）；
var running=false；
$（此）.data（'playForward'，true）；
$（this）.bind（interaction，function（）{//interaction是在手机上点击并点击桌面
如果（！正在运行）{
运行=真；
var lastExecution=new Date（）.getTime（）；
var计数器=1；
功能乒乓球（）{
var now=new Date（）.getTime（）；
如果（现在-lastExecution>=（1000/config.fps））{//动画应该以12fps的速度运行
img.css（'margin-left'，$（this）.data（'playForward'）？'+='+step+'px'：'-='+step+'px'）；
计数器++；
lastExecution=新日期（）.getTime（）；
}
如果（计数器<帧）{
请求动画帧（乒乓球）；
}否则{
$（this.data（'playForward'，！（$（this.data（'playForward'））；//这个方向的改变也是在iOS上触发的，非常奇怪
运行=错误；
}
}
乒乓球（）；
}
});

}))