在输入的每个字符上请求服务器是否有问题？

Question

在我的前端，我有一个输入字段，在输入的每个字符（使用vue.js）上发送ajax请求以获得实时过滤（因为分页而无法使用vue过滤器）。

在我的测试环境中，一切顺利，但是这会导致（更大量）真实数据的性能问题，如果是这样，我该怎么做才能防止这种情况发生？

Answer 1

我实际上在Vue.js training course中讨论了这个确切的场景。简而言之，您可能希望等到用户单击某个按钮或其他类似的东西来触发发送请求。另一种需要考虑的方法是使用lazy modifier，这将延迟事件直到change事件被触发。

如果不了解应用程序的目标，很难知道正确的方法。不过，上面列出的选项还有两个需要考虑的选项。

我希望这会有所帮助。

Answer 2

有问题吗？

是

• 客户端会发送大量请求。根据网络连接和浏览器的不同，这可能会导致客户感觉到滞后感。
• 服务器将收到大量请求，可能导致所有客户端的性能下降，以及服务器端额外使用资源。
• 对请求的回复更有可能无法到达。如果您非常快速地发送请求，则会增加显而易见的可能性（例如，当用户已键入“abc”时显示“ab”的自动完成功能）

总的来说，这是不好的做法，主要是因为没有必要做那么多的请求。

如何解决？

正如J.B.在答案中提到的那样，去抖是可行的方法。

debounce函数（下面复制）确保每X毫秒不会多次调用某个函数。具体而言，它允许您在用户未输入任何内容（例如200ms ）时立即发送请求。

这是一个完整的例子（尝试在输入中非常快速地输入文字）：

function debounce(func, wait, immediate) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};
		var callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) func.apply(context, args);
	};
}

var sendAjaxRequest = function(inputText) {      
    // do your ajax request here
    console.log("sent via ajax: " + inputText);
};

var sendAjaxRequestDebounced = debounce(sendAjaxRequest, 200, false); // 200ms

var el = document.getElementById("my-input");
el.onkeyup = function(evt) {
    // user pressed a key
    console.log("typed: " + this.value)
    sendAjaxRequestDebounced(this.value);
}

<input type="text" id="my-input">

有关debounce功能如何运作的详细信息，see this question

Answer 3

我正在搜索的机制称为去抖动。

我在应用程序中使用了this方法。