jquery - 停止输入/书写后如何触发输入文本中的事件？

Question

我想在我停止在输入文本框中输入（而不是在输入时）字符后触发一个事件。

我试过：

$('input#username').keypress(function() {
    var _this = $(this); // copy of this object for further usage

    setTimeout(function() {
        $.post('/ajax/fetch', {
            type: 'username',
            value: _this.val()
        }, function(data) {
            if(!data.success) {
                // continue working
            } else {
                // throw an error
            }
        }, 'json');
    }, 3000);
});

但是这个例子会为每个输入的字符产生一个超时，如果我输入 20 个字符，我会收到大约 20 个 AJAX 请求。

在这个小提琴上，我用一个简单的警报而不是 AJAX 演示了同样的问题。

有没有解决方案，或者我只是为此使用了一种不好的方法？

score 174 · Accepted Answer

您必须使用 a setTimeout（就像您一样）但还要存储参考，以便您可以继续重置限制。就像是：

//
// $('#element').donetyping(callback[, timeout=1000])
// Fires callback when a user has finished typing. This is determined by the time elapsed
// since the last keystroke and timeout parameter or the blur event--whichever comes first.
//   @callback: function to be called when even triggers
//   @timeout:  (default=1000) timeout, in ms, to to wait before triggering event if not
//              caused by blur.
// Requires jQuery 1.7+
//
;(function($){
    $.fn.extend({
        donetyping: function(callback,timeout){
            timeout = timeout || 1e3; // 1 second default timeout
            var timeoutReference,
                doneTyping = function(el){
                    if (!timeoutReference) return;
                    timeoutReference = null;
                    callback.call(el);
                };
            return this.each(function(i,el){
                var $el = $(el);
                // Chrome Fix (Use keyup over keypress to detect backspace)
                // thank you @palerdot
                $el.is(':input') && $el.on('keyup keypress paste',function(e){
                    // This catches the backspace button in chrome, but also prevents
                    // the event from triggering too preemptively. Without this line,
                    // using tab/shift+tab will make the focused element fire the callback.
                    if (e.type=='keyup' && e.keyCode!=8) return;
                    
                    // Check if timeout has been set. If it has, "reset" the clock and
                    // start over again.
                    if (timeoutReference) clearTimeout(timeoutReference);
                    timeoutReference = setTimeout(function(){
                        // if we made it here, our timeout has elapsed. Fire the
                        // callback
                        doneTyping(el);
                    }, timeout);
                }).on('blur',function(){
                    // If we can, fire the event since we're leaving the field
                    doneTyping(el);
                });
            });
        }
    });
})(jQuery);

$('#example').donetyping(function(){
  $('#example-output').text('Event last fired @ ' + (new Date().toUTCString()));
});

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

<input type="text" id="example" />
<p id="example-output">Nothing yet</p>

这将在以下情况下执行：

超时已过，或
用户切换字段（blur事件）

（以先到者为准）

score 78 · Accepted Answer

解决方案：

这是解决方案。在用户停止输入指定的时间后执行函数：

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
  clearTimeout (timer);
  timer = setTimeout(callback, ms);
 };
})();

用法

$('input').keyup(function() {
  delay(function(){
    alert('Hi, func called');
  }, 1000 );
});

score 17 · Accepted Answer

您可以使用 underscore.js “去抖动”

$('input#username').keypress( _.debounce( function(){<your ajax call here>}, 500 ) );

这意味着您的函数调用将在按键 500 毫秒后执行。但是，如果您在 500 毫秒之前按下另一个键（触发另一个按键事件），之前的函数执行将被忽略（去抖动），新的函数将在新的 500 毫秒计时器后执行。

有关额外信息，使用 _.debounce(func,timer, true ) 意味着将执行第一个函数，并且所有其他具有后续 500 毫秒计时器的按键事件将被忽略。

score 10 · Accepted Answer

你需要去抖！

这是一个jQuery 插件，这里是您需要了解的关于debounce的所有信息。如果您是从 Google 来到这里的，并且 Underscore 已进入您应用的 JSoup，那么它已经在!

score 9 · Accepted Answer

您应该分配setTimeout给一个变量并clearTimeout在按键时使用它来清除它。

var timer = '';

$('input#username').keypress(function() {
  clearTimeout(timer);
  timer = setTimeout(function() {
    //Your code here
  }, 3000); //Waits for 3 seconds after last keypress to execute the above lines of code
});

小提琴

希望这可以帮助。

score 7 · Accepted Answer

清洁溶液：

$.fn.donetyping = function(callback, delay){
  delay || (delay = 1000);
  var timeoutReference;
  var doneTyping = function(elt){
    if (!timeoutReference) return;
    timeoutReference = null;
    callback(elt);
  };

  this.each(function(){
    var self = $(this);
    self.on('keyup',function(){
      if(timeoutReference) clearTimeout(timeoutReference);
      timeoutReference = setTimeout(function(){
        doneTyping(self);
      }, delay);
    }).on('blur',function(){
      doneTyping(self);
    });
  });

  return this;
};

score 3 · Accepted Answer

我制作了一些简单的插件，可以做到这一点。它需要的代码比建议的解决方案少得多，而且非常轻巧（~0,6kb）

首先，您创建Bid的对象比bumped任何时候都多。每个碰撞都会延迟下一个给定时间的触发投标回调。

var searchBid = new Bid(function(inputValue){
    //your action when user will stop writing for 200ms. 
    yourSpecialAction(inputValue);
}, 200); //we set delay time of every bump to 200ms

当Bid对象准备好时，我们需要以bump某种方式对其进行处理。让我们将碰撞附加到keyup event.

$("input").keyup(function(){
    searchBid.bump( $(this).val() ); //parameters passed to bump will be accessable in Bid callback
});

这里发生的是：

每次用户按键时，出价都会在接下来的 200 毫秒内“延迟”（碰撞）。如果 200 毫秒后没有再次“碰撞”，回调将被触发。

此外，您还有 2 个附加功能可用于停止出价（例如，如果用户按下 esc 或单击外部输入）以及立即完成和触发回调（例如，当用户按下回车键时）：

searchBid.stop();
searchBid.finish(valueToPass);

score 1 · Accepted Answer

我一直在寻找一个简单的 HTML/JS 代码，但没有找到。然后，我使用onkeyup="DelayedSubmission()".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head><title>Submit after typing finished</title>
<script language="javascript" type="text/javascript">
function DelayedSubmission() {
    var date = new Date();
    initial_time = date.getTime();
    if (typeof setInverval_Variable == 'undefined') {
            setInverval_Variable = setInterval(DelayedSubmission_Check, 50);
    } 
}
function DelayedSubmission_Check() {
    var date = new Date();
    check_time = date.getTime();
    var limit_ms=check_time-initial_time;
    if (limit_ms > 800) { //Change value in milliseconds
        alert("insert your function"); //Insert your function
        clearInterval(setInverval_Variable);
        delete setInverval_Variable;
    }
}

</script>
</head>
<body>

<input type="search" onkeyup="DelayedSubmission()" id="field_id" style="WIDTH: 100px; HEIGHT: 25px;" />

</body>
</html>

score 0 · Accepted Answer

当您只想重置时钟时，为什么要这样做？

var clockResetIndex = 0 ;
// this is the input we are tracking
var tarGetInput = $('input#username');

tarGetInput.on( 'keyup keypress paste' , ()=>{
    // reset any privious clock:
    if (clockResetIndex !== 0) clearTimeout(clockResetIndex);

    // set a new clock ( timeout )
    clockResetIndex = setTimeout(() => {
        // your code goes here :
        console.log( new Date() , tarGetInput.val())
    }, 1000);
});

如果您正在使用 wordpress，那么您需要将所有这些代码包装在一个 jQuery 块中：

jQuery(document).ready(($) => {
    /**
     * @name 'navSearch' 
     * @version 1.0
     * Created on: 2018-08-28 17:59:31
     * GMT+0530 (India Standard Time)
     * @author : ...
     * @description ....
     */
        var clockResetIndex = 0 ;
        // this is the input we are tracking
        var tarGetInput = $('input#username');

        tarGetInput.on( 'keyup keypress paste' , ()=>{
            // reset any privious clock:
            if (clockResetIndex !== 0) clearTimeout(clockResetIndex);

            // set a new clock ( timeout )
            clockResetIndex = setTimeout(() => {
                // your code goes here :
                console.log( new Date() , tarGetInput.val())
            }, 1000);
        });
});

score 0 · Accepted Answer

我们可以使用 useDebouncedCallback 在 react 中执行这个任务。

导入 { useDebouncedCallback } from 'use-debounce'; - 如果未安装，请安装相同的 npm packge

const [searchText, setSearchText] = useState('');

const onSearchTextChange = value => {
    setSearchText(value);
  };

//call search api
  const [debouncedOnSearch] = useDebouncedCallback(searchIssues, 500);
  useEffect(() => {
    debouncedOnSearch(searchText);
  }, [searchText, debouncedOnSearch]);

score 0 · Accepted Answer

这就是我使用的 formControl。这个对我有用。

this.form.controls[`text`].valueChanges
  .pipe(debounceTime(500), distinctUntilChanged())
  .subscribe((finalText) => {
    yourMethod(finalText);
});

score 0 · Accepted Answer

0

<input>在您的 html中使用属性 onkeyup="myFunction()" 。

于 2020-05-05T11:05:45.377 回答

score -1 · Accepted Answer

在我看来，当用户不专注于该输入时，他就会停止写作。为此，您有一个名为“blur”的函数，它可以执行以下操作

jquery - 停止输入/书写后如何触发输入文本中的事件？

13 回答 13

我们可以使用 useDebouncedCallback 在 react 中执行这个任务。

Related

Reference