Question

我不明白下面突出显示的代码“我不理解这里会发生什么”。我知道这是一个回叫功能。但我不明白该功能如何运作和目的。为了记录，我理解其他一切。我以前从未见过这样的函数。我确实理解OR语句用于检测哪个浏览器。

  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>



 window.requestAnimFrame = (function(callback) {
   // I DO NOT UNDERSTAND WHAT IS GOING ON HERE
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
      console.log("inside callback");
      window.setTimeout(callback, 1000 / 60);
    };
  })();
  function drawRectangle(myRectangle, context) {
    context.beginPath();
    context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
    context.fillStyle = '#8ED6FF';
    context.fill();
    context.lineWidth = myRectangle.borderWidth;
    context.strokeStyle = 'black';
    context.stroke();
  }
  function animate(myRectangle, canvas, context, startTime) {
    // update
    var time = (new Date()).getTime() - startTime;

    var linearSpeed = 100;
    // pixels / second
    var newX = linearSpeed * time / 1000;

    if(newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
      myRectangle.x = newX;
    }

    // clear
    context.clearRect(0, 0, canvas.width, canvas.height);

    drawRectangle(myRectangle, context);

    // request new frame
    requestAnimFrame(function() {
      animate(myRectangle, canvas, context, startTime);
    });
  }
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  //
  var myRectangle = {
    //position
    x: 0,
    y: 75,
    //dimension
    width: 100,
    height: 50,
    // stlye
    borderWidth: 5
  };

  drawRectangle(myRectangle, context);

  // wait one second before starting animation
  setTimeout(function() {
    var startTime = (new Date()).getTime();
    animate(myRectangle, canvas, context, startTime);
  }, 1000);
</script>

Answer 1

当您OR两个值与JavaScript一起使用时，您不会明确地获得布尔值...您将获得第一个真值。这通常用于提供默认值或回退。例如：

console.log( null || 'some string'); // Logs 'some string'


var myOption = 'some value';
myOption = myOption || 'default value'; // myOption is 'some value'

代码中特别发生的是requestAnimationFrame函数需要很长时间才能实现标准化。每个浏览器供应商都使用自己的前缀制作了自己的版本。此函数将遍历该函数的每个可能名称，直到它命中一个。（函数是＆＃34; truthy＆＃34;其中undefined或null不是。）

理解代码

1 个答案: