按住键盘上的 *delete* 键时的 Vuejs 反应速度

Question

在 Vuejs 中，我正在使用 @input 属性监听 <input>，因此当 input 字段为空时，一条消息显示 "Name cannot be blank" 它工作正常，除了当我按住键盘上的删除按钮时，删除速度非常快，Vuejs 没有捕捉到它并且 "name is valid!" 显示

HTML:

<input type="text" v-model="newName" @input="checkName" class="input is-small">
<span ref="nameMsg" class="inline-block text-xs ml-4 mt-2">{{nameMsg}}</span>

@input('checkName')上的方法：

checkName(e){
    
    let name = e.target.value; // also tried let name = this.newName
    let value = name.trim();
    console.log(value.length); // As shown on screen
    if(value.length == 0){
        this.nameMsg = "A name cannot be blank"
        return;
    }else if(value.length < 2){
        this.nameMsg = "A name length cannot be less than 2"
        return;
    }else{

        axios({
            method: 'get',
            url: `/${value}`
        }).then(res=>{
            this.nameMsg = res.data // "name is valid"
        }).catch(err=>{
            this.nameMsg = err.response.data.msg; // "name not valid"
        })
    }
    
}

我在服务器上有这个，所以 nameMsg 不会被 axios

异步覆盖

if(name length > 1) return validation messages

Answer 1

你应该去抖你的输入。这将防止在您删除并等待事件完成时一遍又一遍地调用服务器。

如果您没有使用 lodash

安装 debounce（解压后 12 KB）

npm i debounce

导入去抖

import debounce from debounce

通过将您的函数包装在去抖动函数中来对您的函数进行去抖动。

例如

debounce(function(event){
   //Do cool stuff here
}, OptionalTimeout);

如果您想控制在您发出 API 调用之前停止触发事件所花费的时间，您可以设置超时。

checkName: debounce((e) => {
    
    let name = e.target.value; // also tried let name = this.newName
    let value = name.trim();
    console.log(value.length); // As shown on screen
    if(value.length == 0){
        this.nameMsg = "A name cannot be blank"
        return;
    }else if(value.length < 2){
        this.nameMsg = "A name length cannot be less than 2"
        return;
    }else{

        axios({
            method: 'get',
            url: `/${value}`
        }).then(res=>{
            this.nameMsg = res.data // "name is valid"
        }).catch(err=>{
            this.nameMsg = err.response.data.msg; // "name not valid"
        })
    }
    
}, 250); /* timeout - set to 250ms for this example, change it if you want/need */ 

---

如果您正在使用 lodash

无需安装其他软件包。 As lodash has always had debouncing built-in.

像正常一样导入 lodash

import _ from "lodash"; 

或者，如果你想变得有趣，并减小你的包大小（假设你对所有 lodash 导入都这样做）

import debounce from "lodash/debounce";

去抖你的函数

checkName: _.debounce((e) => {
    
    let name = e.target.value; // also tried let name = this.newName
    let value = name.trim();
    console.log(value.length); // As shown on screen
    if(value.length == 0){
        this.nameMsg = "A name cannot be blank"
        return;
    }else if(value.length < 2){
        this.nameMsg = "A name length cannot be less than 2"
        return;
    }else{

        axios({
            method: 'get',
            url: `/${value}`
        }).then(res=>{
            this.nameMsg = res.data // "name is valid"
        }).catch(err=>{
            this.nameMsg = err.response.data.msg; // "name not valid"
        })
    }
    
}, 250); /* timeout - set to 250ms for this example, change it if you want/need */