Question

这更多是一个提出类似问题的建议！我有一个搜索框，用户可以在其中输入内容，并获得可供选择的建议列表。我正在使用react，axios进行数据获取和redux-saga进行状态管理。基本上看起来像这样：

handleChange(stringValue){
    this.setState({
        inputValue : stringValue
    });
    callServer(stringValue);
}

现在，一切正常，但是问题在于发送所有这些请求以及处理传入的响应和更改状态似乎是不必要的，因为用户不会停止查看他键入的每个字符中的建议。我正在寻找一种仅在我知道用户完成快速键入后才提出建议的方法。我正在想做的事情看起来像这样：

handleChange(stringValue){
    clearTimeOut(this.callerTimer);
    this.callerTimer = null;
    this.callerTimer = setTimeOut(function(){
        this.callServer(stringValue);
        this.callerTimer = null;
    }.bind(this),300)
    //i consider 300ms as the average time it takes people to stop typing and think
}

这有效，但是我对此感觉不太好。那么，你们知道其他任何清洁且不那么及时的方法来做我想要的吗？有什么办法可以解决我的传奇效应，或者可能是我不知道的输入中内置的时间阈值问题？

Answer 1

您要去抖动功能。

基本上，它限制了函数可以触发的速率。因此，它在触发事件之前需要等待几个 ms ，就像用户停止写入过程一样。

检查此代码段

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
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);
	};
};

// This will apply the debounce effect on the keyup event
// And it only fires 500ms or half a second after the user stopped typing
$('#testInput').on('keyup', debounce(function () {
  alert('typing occurred');
  $('.content').text($(this).val());
}, 500));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="testInput" />

<p class="content"></p>

在codesandbox中找到React解决方案

https://codesandbox.io/embed/green-meadow-16r3p?fontsize=14

现在基本上由您决定。在 ms 中设置您自己的时间，一切顺利。无需为项目安装任何其他依赖项。 Lodash具有防抖功能，但您不想仅为一个功能安装所有lodash。

Answer 2

我强烈建议使用lodash的https://lodash.com/docs/4.17.11#debounce中的debounce

从文档中：

创建一个去抖动的函数，该函数将调用func延迟到自上次调用该去抖动的函数以来经过了毫秒的等待时间。

因此，您将请求功能传递给debounce，因此限制了对服务器的请求数量。

请求后端输入更改数据的有效方法

2 个答案: