Vue.js计时计算与纯JavaScript版本不匹配

Question

I'm trying to create a 'beats per minute' (BPM) calculator, identical (for now) to the one you can find here . But for some reason, when I use the BPM calculator at that link on a test song, it gets within 1 BPM of the actual value of 85.94 within of 7 keypresses and just gets more accurate from there, ending within 0.05 of the actual BPM, whereas with my (essentially identically-coded) Vue.js version, it starts much higher (182-->126-->110) and goes down from there, but even after 60 keypresses it's still off by ~2 BPM, and after a full song, it was still off by about 0.37 BPM.

Here's the code for the plain-JavaScript version at that link :

var count = 0;
var msecsFirst = 0;
var msecsPrevious = 0;

function ResetCount()
  {
  count = 0;
  document.TAP_DISPLAY.T_AVG.value = "";
  document.TAP_DISPLAY.T_TAP.value = "";
  document.TAP_DISPLAY.T_RESET.blur();
  }

function TapForBPM(e)
  {
  document.TAP_DISPLAY.T_WAIT.blur();
  timeSeconds = new Date;
  msecs = timeSeconds.getTime();
  if ((msecs - msecsPrevious) > 1000 * document.TAP_DISPLAY.T_WAIT.value)
    {
    count = 0;
    }

  if (count == 0)
    {
    document.TAP_DISPLAY.T_AVG.value = "First Beat";
    document.TAP_DISPLAY.T_TAP.value = "First Beat";
    msecsFirst = msecs;
    count = 1;
    }
  else
    {
    bpmAvg = 60000 * count / (msecs - msecsFirst);
    document.TAP_DISPLAY.T_AVG.value = Math.round(bpmAvg * 100) / 100;
    document.TAP_DISPLAY.T_WHOLE.value = Math.round(bpmAvg);
    count++;
    document.TAP_DISPLAY.T_TAP.value = count;
    }
  msecsPrevious = msecs;
  return true;
  }
document.onkeypress = TapForBPM;

//  End -->

And here's my version:

computed: {
    tappedOutBpm: function() {
        let totalElapsedSeconds = (this.timeOfLastBpmKeypress - this.timeOfFirstBpmKeypress) / 1000.0
        let bpm = (this.numberOfTapsForBpm / totalElapsedSeconds) * 60.0
        return Math.round(100*bpm)/100;
    },
},
methods: {
    tapForBPM: function() {
        let now = new Date;
        now = now.getTime();
        // let now = window.performance.now()
        if (this.timeOfFirstBpmKeypress === 0 || now - this.timeOfLastBpmKeypress > 5000) {
            this.timeOfFirstBpmKeypress = now
            this.timeOfLastBpmKeypress = now
            this.numberOfTapsForBpm = 1
        } else {
            this.timeOfLastBpmKeypress = now
            this.numberOfTapsForBpm++
        }
    }
}

Answer 1

I figured it out by stepping through both of our code.

The problem was that I was setting the number of taps to 1 as soon as the user tapped the key the first time, when in reality it's not taps that I want to count, but beats , and the first beat requires not one tap, but two : the start and the end of that beat. So what I should do is rename the variable to numberOfTappedOutBeats and set it to 0 after the first tap rather than 1 .