Question

我正在尝试捕获captured数组中的用户输入（jquery事件对象）。我正在为事件添加t属性，这是事件从记录开始经过的时间。然后我想回到那个数组，在for循环的闭包中使用setTimeout，以便以与用户输入相同的时序触发这些事件。

我只是不明白为什么动画不会在回来的路上播放......！??！

如果有人对此有所了解，请帮助......帮助！

$(function() {

  var dancer = document.getElementById('dancer');
  var $dancer = $(dancer);
  var dancerContainer = document.querySelector('.dancer-container');
  var $dancerContainer = $(dancerContainer);
  var count = 3;  
  var captured = [];
  var countInterval;

  function replayDance(captured) {
    for (i = 0; i < captured.length; i++) {
        e = captured[i];
        t = e.t;
        setTimeout((function (e) {
            return function () {
              // $dancer.trigger(e.type);
              // this should be
              $dancer.trigger(e.originalEvent);
            };
        })(e), t);
    }
  }

  function countdown() {
    console.log(count);
    --count;
    if (count == 0) {
      console.log('recording')
      captureInput();
      clearInterval(countInterval);
      count = 3;
    }
  }

  function captureInput() {
    var mouseCapture = [];
    var keyCapture = [];
    var start = new Date().getTime();

    $(document).on('mousemove.capture', function(event) {
      event.t = new Date().getTime() - start;
      captured.push(event);
    });

    $(document).on('keyup.capture', function(event) {
      event.t = new Date().getTime() - start;
      captured.push(event);
    });

    setTimeout(function() {
      console.log('finished capturing');
      $(document).off('.capture');
    }, 3000);
  }

  function followMouse(event) {
      var width = $(window).width();
      var height = $(window).height();
      var mouseX = event.pageX - (width * 0.25);
      var mouseY = event.pageY - (height * 0.25);
      var angleX = (mouseY / height) * 45;
      var angleY = (mouseX / width) * 45;
      dancer.style.webkitTransform = "rotateX(" + angleX + "deg) rotateY(" + angleY + "deg)";
      console.log(dancer.style.webkitTransform);
  }

  function resize() {
      var y = ($(window).height() - 250) * 0.5;
      $("#box").css('margin-top', y + 'px');
  }

  function triggerAnimation(el, klassName) {
    el.stop(true, false).addClass(klassName).one('webkitAnimationEnd', function() { el.removeClass(klassName) });
  }  

  $(document).on('keyup', function(event) {
    switch (event.which) {
      case 49:
        triggerAnimation($dancerContainer, 'shake');
        break;
      case 50:
        triggerAnimation($dancerContainer, 'bounce');
        break;
      case 51:
        triggerAnimation($dancerContainer, 'swing');
        break;
      case 52:
        triggerAnimation($dancerContainer, 'wobble');
        break;
    }
  });

  $('#button-record').on('click', function(e) {
    countInterval = setInterval(countdown, 1000);
  });

  $('#button-replay').on('click', function(e) {
    if (captured.length) {
      replayDance(captured);
    } else {
      console.log('nothing captured!');
    }
  })

  $(window).on('resize', resize);
  $(document).ready(resize);
  $(document).on('mousemove', followMouse);
});

Answer 1

我需要触发附加到Event对象的originalEvent，而不是尝试再次触发e.type。纠正了帖子中有问题的代码行。

Javascript重播用户输入

1 个答案: