每次用户输入用户名时发送 Ajax 请求以检查用户名的可用性。这种方法有什么缺点？

Question

我正在制作一个 NodeJS 身份验证应用程序。

情况：用户输入用户名，如果用户名被占用，它将显示“用户名被占用”，否则将显示“用户名可用”

我想知道我在下面实现的方法的缺点：

用户名输入栏

<input type="text" name="userName" placeholder="Username" required="" onkeyup="checkUsername(this.value)">

所以每次用户输入字母时，都会调用 checkUsername() 函数！

检查用户名功能

        function checkUsername(data){
            $( document ).ready(function(){

                
            $.ajax({
                url: '/register/checkUsername',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({user_name:data}),
                success: function(new_data) {
                    if(new_data == 'available'){
                        //By Default the messages are hidden!
                        document.getElementsByClassName('user-name-taken')[0].style.display = 'none'
                        document.getElementsByClassName('user-name-available')[0].style.display = 'block'
                    } else  {
                        document.getElementsByClassName('user-name-available')[0].style.display = 'none'
                        document.getElementsByClassName('user-name-taken')[0].style.display = 'block'
                    }
                }
            })

            })
            
        }

'/register/checkUsername'路由器

async (req,res)=>{
        var username = await userModel.findOne({userName:req.body.user_name})
        if(!username) {
            res.send('available')
        } else {
            res.send('none')
        }

    }

这会使网络应用程序变慢吗？还有其他缺点吗？

Answer 1

当前的方法不是最好的，当您从性能的角度进行讨论时，或者当您考虑扩展时，API 命中的数量会呈指数级增长（它适用于较小规模的项目）。

PS：虽然从用户体验的角度来看，这很棒。

更好的方法1

在输入完成后提供一个按钮来检查用户名的可用性。

PS：不是最好的用户体验。

更好的方法2

为了实现两全其美，您可以等到用户输入最少字符数（可能是 4 或 5 个），然后在输入的每个字符上开始调用 API，因为用户名不会少于 4-5 个字符并且以该长度检查不是一个好主意。除此之外，它还很有意义，并且还提供了出色的用户体验。

最后，可能还有很多其他的方法可以解决，这是根据我的观点。随时发表评论并为其添加更多积分。