Làm thế nào để kích hoạt một sự kiện trong văn bản đầu vào sau khi tôi ngừng nhập / viết?

Tôi muốn kích hoạt một sự kiện ngay sau khi tôi ngừng nhập (không phải khi đang nhập) các ký tự trong hộp văn bản đầu vào của mình.

Tôi đã thử với:

$('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);
});

Nhưng ví dụ này tạo ra thời gian chờ cho mỗi ký tự được nhập và tôi nhận được khoảng 20 yêu cầu AJAX nếu tôi nhập 20 ký tự.

Trong trò chơi này, tôi chứng minh vấn đề tương tự với một cảnh báo đơn giản thay vì AJAX.

Có giải pháp nào cho việc này hay tôi chỉ đang sử dụng một cách tiếp cận tồi cho việc này?

Bạn sẽ phải sử dụng setTimeout(giống như bạn đang sử dụng ) nhưng cũng lưu trữ tham chiếu để bạn có thể tiếp tục đặt lại giới hạn. Cái gì đó như:

//
// $('#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>

Điều đó sẽ thực thi khi:

1. Đã hết thời gian chờ, hoặc
2. Người dùng đã chuyển trường ( blursự kiện)

(Bất cứ thứ gì đến trước)

GIẢI PHÁP:

Đây là giải pháp. Thực thi một chức năng sau khi người dùng đã ngừng nhập trong một khoảng thời gian cụ thể:

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

Sử dụng

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

Bạn có thể sử dụng underscore.js "debounce"

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

Điều này có nghĩa là lệnh gọi hàm của bạn sẽ thực hiện sau 500 mili giây nhấn phím. Nhưng nếu bạn nhấn một phím khác (sự kiện nhấn phím khác được kích hoạt) trước 500ms, việc thực thi chức năng trước đó sẽ bị bỏ qua (đã gỡ lỗi) và chức năng mới sẽ thực thi sau một bộ đếm thời gian 500ms mới.

Để biết thêm thông tin, việc sử dụng _.debounce (func, timer, true ) có nghĩa là hàm đầu tiên sẽ thực thi và tất cả các sự kiện nhấn phím khác trong khoảng thời gian 500ms tiếp theo sẽ bị bỏ qua.

Bạn cần debounce!

Đây là một plugin jQuery và đây là tất cả những gì bạn cần biết về debounce . Nếu bạn đang đến đây từ Google và Underscore đã tìm thấy đường vào JSoup của ứng dụng của bạn, thì nó đã bị loại bỏ ngay !

dung dịch làm sạch:

$.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;
};

Bạn nên gán setTimeoutcho một biến và sử dụng clearTimeoutđể xóa nó khi nhấn phím.

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
});

Vĩ cầm

Hi vọng điêu nay co ich.

Có một số plugin đơn giản mà tôi đã thực hiện làm được điều đó. Nó yêu cầu mã ít hơn nhiều so với các giải pháp được đề xuất và nó rất nhẹ (~ 0,6kb)

Đầu tiên bạn tạo Bidđối tượng hơn có thể bumpedbất cứ lúc nào. Mỗi lần tăng sẽ trì hoãn việc kích hoạt gọi lại Giá thầu trong khoảng thời gian nhất định tiếp theo.

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

Khi Bidđối tượng đã sẵn sàng, chúng ta cần bumpnó bằng cách nào đó. Hãy đính kèm va chạm với keyup event.

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

Điều gì xảy ra ở đây là:

Mỗi khi người dùng nhấn phím, giá thầu bị 'trì hoãn' (tăng) trong 200 mili giây tiếp theo. Nếu 200ms trôi qua mà không bị 'va chạm' lần nữa, thì lệnh gọi lại sẽ được kích hoạt.

Ngoài ra, bạn có 2 chức năng bổ sung để dừng giá thầu (ví dụ: nếu người dùng nhấn esc hoặc nhấp vào đầu vào bên ngoài) và để hoàn tất và kích hoạt lệnh gọi lại ngay lập tức (ví dụ: khi người dùng nhấn phím enter):

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

Tôi đã tìm kiếm một mã HTML / JS đơn giản và tôi không tìm thấy bất kỳ mã nào. Sau đó, tôi đã viết mã bên dưới bằng cách sử dụng 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>

tại sao phải làm nhiều như vậy khi bạn chỉ muốn đặt lại đồng hồ?

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);
});

nếu bạn đang làm việc trên wordpress, thì bạn cần phải bọc tất cả mã này bên trong một khối 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);
        });
});

Sử dụng thuộc tính onkeyup = "myFunction ()" trong <input>html của bạn.

Theo suy nghĩ của tôi, người dùng ngừng viết khi anh ta không tập trung vào đầu vào đó. Đối với điều này, bạn có một chức năng gọi là "làm mờ" có chức năng như