javascript - 检测用户何时开始/停止在 jquery 中输入

Question

有一次我正在为我的问题寻找解决方案，我的问题是“我想检测用户何时打字以及何时停止打字，以便我可以更新状态。”

我已经创建了一个示例。愿它对您有用。

var typingTimer;
var doneTypingInterval = 10;
var finaldoneTypingInterval = 500;

var oldData = $("p.content").html();
$('#tyingBox').keydown(function() {
  clearTimeout(typingTimer);
  if ($('#tyingBox').val) {
    typingTimer = setTimeout(function() {
      $("p.content").html('Typing...');
    }, doneTypingInterval);
  }
});

$('#tyingBox').keyup(function() {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(function() {
    $("p.content").html(oldData);
  }, finaldoneTypingInterval);
});



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>



<textarea id="tyingBox" tabindex="1" placeholder="Enter Message"></textarea>
<p class="content">Text will be replace here and after Stop typing it will get back</p>

View on Fiddle : http://jsfiddle.net/utbh575s/

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>

现在基本上由您决定。以 ms 为单位设置您自己的时间，您就可以开始了。