如何使用requestAnimationFrame在javascript中为事件设置动画

Question

我在我的javascript应用中使用requestAnimationFrame。客户端侦听从服务器发送的事件。然后客户端在接收事件时开始动画，并在回调中更新全局客户端变量。 （套接字来自＆＃39; socket.io＆＃39;）

const raf = window.requestAnimationFrame
  || window.webkitRequestAnimationFrame
  || window.mozRequestAnimationFrame
  || window.oRequestAnimationFrame
  || window.msRequestAnimationFrame
  || function(callback) {
    window.setTimeout(callback, 1000 / 60);
  };

let start = false;
let cp;

socket.on('init', function(data) {
  if (data) {
    start = true;
    cp = data.user;
  }
}

function animate() {
  // Do animation()
  cp.render();
}

if (start) {
  console.log('started animation');
  raf(animate);
}

但是我的代码永远不会到达最后一个if表达式中的块，这意味着它不会打印出started animation。

如果我将raf(animate)移出if子句，它会开始制作动画，但在这种情况下，如果{0}}事件未收到，我会收到错误消息init是cp，因此undefined无效。我仍然可以动画，但看到错误有点烦人。如何仅在客户端收到cp.render()事件时启动动画？