React KeyDown事件有时会在KeyUp上触发

Question

So right now I've got an incredibly weird phenomenon happening in my React app and I'm not entirely sure how to describe it, but here goes:

I'm building a synthesizer with the Web Audio API and React that responds to keyDown events to trigger the beginning of the note and keyUp events to trigger the end of the note. Most of the time this works flawlessly. But one key press in every 10-15 results in an additional keyDown event firing after the keyUp event. I've got a React component that deals with all the event handling and fires off Redux actions depending on the event being handled ( keyUp or keyDown ). Additionally, I'm using the lodash/debounce method to suppress additional keyDown events when the user holds a key.

I'm not wedded to the lodash/debounce function, I just need something to suppress the extra keyDown events. It's entirely possible I'm not using it properly or that there's an easier solution. I just need answers.

My component is as follows:

import React, { Component } from 'react'
import debounce from 'lodash/debounce'

import { REGISTERED_KEYS } from '../constants/keyboard-constants'

export default class ComputerKeyboard extends Component {
  constructor (props) {
    super(props)

    this.handleKeyDown = this.handleKeyDown.bind(this)
    this.handleKeyUp = this.handleKeyUp.bind(this)
  }

  handleKeyDown (e) {
    return debounce((event = e) => {
      if (this.props.currentKeys.indexOf(event.keyCode) < 0 && REGISTERED_KEYS.includes(event.keyCode)) {
        this.props.keyDown(event.keyCode)
        this.props.updateGateStartTime({ value: this.props.audioContext.currentTime })
      }
    }, 2)()
  }

  handleKeyUp (e) {
    const isLastKey = this.props.currentKeys.includes(e.keyCode) && this.props.currentKeys.length === 1
    if (isLastKey && this.props.gateStartTime) {
      this.props.updateGateStartTime({ value: null })
    }
    if (this.props.currentKeys.includes(e.keyCode) && REGISTERED_KEYS.includes(e.keyCode)) {
      this.props.keyUp(e.keyCode)
    }
  }

  componentDidMount () {
    document.addEventListener('keydown', this.handleKeyDown)
    document.addEventListener('keyup', this.handleKeyUp)
  }

  componentWillUnmount () {
    document.removeEventListener('keydown', this.handleKeyDown)
    document.removeEventListener('keyup', this.handleKeyUp)
  }

  render () {
    return null
  }
}

Answer 1

It was the debounce . Once I removed that, I never saw the error again. I was trying to get fancy but didn't understand the difference between throttling and debouncing. As per this article :

Throttling enforces a maximum number of times a function can be called over time. As in "execute this function at most once every 100 milliseconds."

and

Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in "execute this function only if 100 milliseconds have passed without it being called."

My thought is that I likely want to be throttling and that by debouncing, I was allowing the last call of the function to be let through because the amount of time between calls was short enough that occasionally, upon release, the debounce let an event through that it should not have. Additionally, because the key was no longer depressed and registered as such, the the fail safe logic built into the handleKeyDown was no longer adequate because it presupposes that there are actually keys engaged.