为什么在 jQuery 中传递给我的回调函数的参数不断更改

Why does a parameter passed to my callback function in jQuery keep getting changed?

本文关键字：参数 函数 回调 我的 jQuery 为什么      更新时间：2023-09-26

我正在研究不同的方法来解决jQuery中众所周知的有争议的"requestAnimationFrame"删除问题，其中animate被恢复为使用setTimeout/setInterval而不是即将到来的requestAnimationFrame API。这当然会导致一些已知问题，当该页面的浏览器选项卡不在焦点中时，动画会排队(因为我希望当页面的选项卡失焦时动画停止的这种效果，所以它成为一个问题(。一种解决方案是将所有内容包装在真正的"requestAnimationFrame"的跨浏览器请求AnimFrame填充码中，另一种解决方案是为动画元素生成唯一的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 可能不是必需的，并抛弃了我对焦点侦听器的初步调查，现在支持填充方法;然而，这种修补指出了 jQuery 的另一个潜在问题(或者更可能是我对它的理解(，将参数传递给 jQuery 中的回调函数并确保参数的值通过动画上下文传播。

如您所见，动画启动和停止是因为不再传递值"p"。我不是闭包方面的专家，但我看到它们在这里作为一种解决方案提出，并使用 $.proxy(我在休息并沮丧地发布到 SO 之前从这里尝试过(。即使在链接 API 调用时，我也从未遇到过 $.ajax 或 $.getJSON 回调的问题，但由于某种原因，我似乎无法让回调参数保持其值，以便后续调用 continueScrolling 函数。一些JS/jQuery忍者的任何帮助将不胜感激......

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

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

http://jsfiddle.net/K2nfM/

相关文章：