1

我正在研究不同的方法来解决jQuery 中众所周知的有争议的“requestAnimationFrame”删除，其中animate被恢复为使用 setTimeout/setInterval 而不是即将推出的requestAnimationFrame API。这当然会导致一些已知问题，即当页面的浏览器选项卡不在焦点时动画会排队（因为我希望当页面的选项卡不在焦点时动画停止的这种效果，所以它成为一个问题）。一种解决方案是将所有内容包装在真正的“requestAnimationFrame”的跨浏览器requestAnimFrame shim中，另一种是为动画元素生成唯一 ID 加上时间戳，并且仅在窗口聚焦时运行动画。

这是我在使用焦点侦听器和 ID 传递的第二种方法时遇到的令人沮丧的问题的快速而肮脏的演示：http: //jsfiddle.net/bcmoney/NMgsc/17

更新（主要问题已解决）：http: //jsfiddle.net/bcmoney/NMgsc/

准系统代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>window.focus listener EXAMPLE - jsFiddle demo by bcmoney</title> 
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style type='text/css'>
  body { overflow:hidden; }
  #container { width:100%; height:100%; }
  #animated { width:120px; position:absolute; left:2px; top:20px; padding:50px; background:skyblue; color:white }
</style>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
  var animation = 1;
  var startTime = undefined;
  var FPS = 60; //frames per second
  var AVAILABLE_WIDTH = $("#container").width() || "800px";
  var animation = null;
  var FOCUSED = false;
  var timestamp = new Date().getTime();
  var PAGE_ID = $("body").attr("id") + "-animated-"+timestamp;

  function continueScrolling(p) {
      console.log('FUNCTION p: '+p);
      if (FOCUSED === true && p === PAGE_ID) {
        animation = setTimeout(scrollRight.bind(p), FPS);
      } else {
          clearTimeout(animation);
          $('#animated').stop(true, true);
      }
  }

  var scrollRight = function(p) {
      time =  +new Date;
      startTime = (startTime !== undefined) ? startTime : time-FPS;
    move = ((time - startTime)/10 % AVAILABLE_WIDTH)+"px";
      console.log('P:'+p+' | T:'+time+' | ST:'+startTime+' | W:'+AVAILABLE_WIDTH+'\n'+move);
    $('#animated').animate({
         "left":move
      }, 
      1000/FPS, 
      "linear",
       function() {
         console.log('CALLBACK p: '+p);         
         continueScrolling(p);
       }
    );
  }  

  $(window).blur(function(){
     FOCUSED = false;
    $('#stop').click();
  });

  $(window).focus(function(){
     FOCUSED = true;
    $('#start').click();   
  });

  $('#start').click(function() {  
    scrollRight(PAGE_ID);
  });

  $('#stop').click(function() {
    $('#animated').stop(true, true);
    clearTimeout(animation);
  });
});//]]>  
</script>
</head>
<body id="slider">
  <a id="start" href="#start">Start</a> | <a id="stop" href="#stop">Stop</a>
<div id="container">
    <div id="animated">Animated content</div>
</div>
</body>
</html>

我最近才意识到可能不需要唯一 ID，并放弃了我对焦点侦听器的初步调查，现在支持 shim 方法；然而，这种修补指出了 jQuery 的另一个潜在问题（或者更可能是我的理解），将参数传递给 jQuery 中的回调函数并确保参数的值通过动画的上下文传播。

如您所见，动画开始和停止是因为不再传递值“p”。我不是闭包方面的专家，但我看到他们在这里提出作为一种解决方案以及使用$.proxy（我从这里尝试过，然后休息一下并沮丧地发布到 SO）。我从来没有遇到过$.ajax或$.getJSON回调的问题，即使在链接 API 调用时也是如此，但由于某种原因，我似乎无法获取回调参数来维持其对continueScrolling函数的后续调用的值。一些 JS/jQuery ninjas 的任何帮助将不胜感激......

4

1 回答 1

2

setTimeout 需要一个函数作为第一个参数：

        animation = setTimeout(function(){scrollRight(p)}, FPS);

http://jsfiddle.net/K2nfM/

于 2012-05-09T19:02:26.650 回答