javascript - 为什么滚动使用中间点击暂停间隔事件？

Question

我在使用 Canvas 的网页上创建了一个视差背景动画。它使用 setInterval 循环每 20 毫秒渲染一帧。

在试验这种设计时，我注意到如果我使用中间单击技术滚动，动画会暂停。为什么是这样？它只适用于 Canvas ，还是适用于所有间隔事件？

另外，有什么办法可以抑制这个吗？

我在 Windows 10 上运行 Chrome 74.0.3729.131。

这是@Kaiido 要求的代码:

function parallaxCipher(size, color, speed, grid, sector, seed){ //Parallax function
  scr = document.getElementById("parallax" + sector); //The canvasses are named "parallax" + ID
  ctx = scr.getContext("2d");
  ctx.fillStyle = "#000";
  ctx.fillRect(0,0,scr.width,scr.height); //Turn area black
  var xGridMax = Math.ceil(scr.width / grid);
  var yGridMax = Math.ceil(scr.height / grid) + 1;
  var seedList = prng(seed,yGridMax * 2); //Simple PRNG
  for(var c = 0; c < yGridMax;c++){
    seedList[c] += seedList[c + yGridMax] * 256;
  }
  seedList.length = yGridMax;
  var rotation = Math.floor(Math.floor(Date.now() / speed) / grid) % yGridMax;
  rotation = yGridMax - rotation - 1; //It's a mess. I know.
  if(rotation > 0){
    seedList = seedList.slice(seedList.length-rotation).concat(seedList.slice(0,seedList.length - rotation));
  }
  ctx.fillStyle = color;
  for(var a = 0;a<yGridMax;a++){
    var row = prng(seedList[a],Math.ceil((xGridMax + 1)/8));
    var row2 = [];
    for(var d = 0;d<row.length;d++){
      row[d] = row[d].toString(2);
      row[d] = "0".repeat(8 - row[d].length) + row[d];
      row2 = row2.concat(row[d].split(''));
    }
    row2.length = xGridMax + 1;
    var rotation2 = Math.floor(Math.floor(Date.now() / speed) / grid) % xGridMax;
    if(rotation2 > 0){
      row2 = row2.slice(row2.length-rotation2).concat(row2.slice(0,row2.length - rotation2));
    }

    for(var b = -1;b<xGridMax;b++){
      ctx.font = size + "px monospace";
      ctx.fillText(row2[b + 1],(b * grid) - (size * 11 / 30) + ((Date.now() / speed) % grid),(a * grid) + (size / 2) - ((Date.now() / speed) % grid));

    }
  }
}
function prng(seed, instances){
  //PRNG takes a 16 bit seed
  var primes = [2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53,59,61,67,71,73,79,83,89,97,101,103,107,109,113,127,131,137,139,149,151,157,163,167,173,179,181,191,193,197,199,211,223,227,229,233,239,241,251,263,269,271,277,281,283,293,307,311,313,317,331,337,347,349,353,359,367,373,379,383,389,397,401,409,419,421,431,433,439,443,449,457,461,463,467,479,487,491,499,503,509,521,523,541,547,557,563,569,571,577,587,593,599,601,607,613,617,619,631,641,643,647,653,659,661,673,677,683,691,701,709,719,727,733,739,743,751,757,761,769,773,787,797,809,811,821,823,827,829,839,853,857,859,863,877,881,883,887,907,911,919,929,937,941,947,953,967,971,977,983,991,997,1009,1013,1019,1021,1031,1033,1039,1049,1051,1061,1063,1069,1087,1091,1093,1097,1103,1109,1117,1123,1129,1151,1153,1163,1171,1181,1187,1193,1201,1213,1217,1223,1229,1231,1237,1249,1259,1277,1279,1283,1289,1291,1297,1301,1303,1307,1319,1321,1327,1361,1367,1373,1381,1399,1409,1423,1427,1429,1433,1439,1447,1451,1453,1459,1471,1481,1483,1487,1489,1493,1499,1511,1523,1531,1543,1549,1553,1559,1567,1571,1579,1583,1597,1601,1607,1609,1613,1619,1621,1627];
  var res = [];
  var j = seed % 256;
  var k = Math.floor(seed / 256);
  for(var a = 0;a < instances;a++){
    res.push(((primes[j] * primes[k]) % 257) - 1);
    if(primes.includes(res[res.length - 1]) || primes.includes(res[res.length - 1] + 1)){
      j = (j + 1) % 257;
    }else{
      k = (k - 1);
      if(k == -1){
        k = 256;
      }
    }
    if(res[res.length - 1] == undefined){
      console.warn("PRNG error: "  + j + ", " + k + ", " + primes[j] + ", " + primes[k]);
    }
  }
  return res;
}

你应该能够运行:

window.setInterval(function(){
  parallaxCipher(15,"#0f0",25,18,"1",9999);
},20)

在创建 ID 为“parallax1”的 Canvas 之后。

Answer 1

requestAnimationFrame 没有这样的卡住问题

基本用法

function animation(ms) {
    // you can use `ms` to make animations smoother
    // while this function should be called every 16.66ms, (60fps),
    // the `ms` argument is a Number, unit is milliseconds and should be accurate to 5 µs (microseconds)
    //
    // ... all your fancy animation 
    requestAnimationFrame(animation);
}
requestAnimationFrame(animation); // or just animation(), however this way ALL animation is "sync'd" to 60fps including the first frame