Vue中处理键盘实体键长按事件异步调用接口的技巧

在开发中，有时需要通过键盘按键实现某种功能，比如：按下键盘的**Enter键**、长按键盘的Enter键这两种状态。当用户按下Enter键并松开的时候，只需完成一次接口异步调用即可实现功能；当用户长按Enter的时候，由于调用接口是异步的，就会存在接口回调还没传回来，而UI已经处理了很多次长按了，这时就会导致UI更新过快而接口更新过慢造成数据不同步问题。解决这个问题，可以通过一个js的onkeyup方法去标记松开Enter键的状态，具体写法可参考如下代码。

export default {
    data() {
        return {
            isKeyUp: true // 标记是否已经松开Enter键
        };
    }，
    created() {
   		document.onkeyup = e => {
			e.preventDefault();
			this.isKeyUp = true; // 标记松开了Enter键
		};
		document.onkeydown = e => {  // 处理按下键盘的Enter键、长按键盘的Enter键
			const code = e && e.keyCode;`在这里插入代码片`
			if (code === 13) {
				  if (!this.isKeyUp) return; // 按下Enter键还没执行结束，不执行以下代码
	              this.isKeyUp = false;  // 标记未执行完成Enter键事件
	              Api.someMethods().then(res => { // 开始执行异步方法
						// 异步方法执行完成，开始更新UI
						...此处省略更新UI的逻辑
						this.isKeyUp = true; // 标记完成了一次Enter键的回调执行，继续执行onkeydown事件
				})
			}
		}
    }
 }