Chạy chức năng javascript khi người dùng gõ xong thay vì bật phím lên?

Tôi muốn kích hoạt yêu cầu ajax khi người dùng nhập xong vào hộp văn bản. Tôi không muốn nó chạy chức năng mỗi khi người dùng gõ một chữ cái vì điều đó sẽ dẫn đến RẤT NHIỀU yêu cầu ajax, tuy nhiên tôi cũng không muốn họ phải nhấn nút enter.

Có cách nào để tôi có thể phát hiện khi người dùng nhập xong và sau đó thực hiện yêu cầu ajax không?

Sử dụng jQuery tại đây! Dave

Vì vậy, tôi sẽ đoán gõ xong nghĩa là bạn chỉ dừng lại một lúc, nói 5 giây. Vì vậy, với ý nghĩ đó, hãy bắt đầu hẹn giờ khi người dùng nhả một phím và xóa nó khi họ nhấn một phím. Tôi đã quyết định đầu vào trong câu hỏi sẽ là #myInput.

Đưa ra một vài giả định ...

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example
var $input = $('#myInput');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}

Câu trả lời được chọn ở trên không hoạt động.

Bởi vì gõTimer được cài đặt nhiều lần (nhấn phím hai lần trước khi kích hoạt phím cho máy đánh chữ nhanh, v.v.) nên nó không rõ ràng.

Giải pháp dưới đây giải quyết vấn đề này và sẽ gọi X giây sau khi kết thúc như OP yêu cầu. Nó cũng không còn yêu cầu chức năng keydown dư thừa. Tôi cũng đã thêm một kiểm tra để cuộc gọi chức năng của bạn sẽ không xảy ra nếu đầu vào của bạn trống.

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on keyup, start the countdown
$('#myInput').keyup(function(){
    clearTimeout(typingTimer);
    if ($('#myInput').val()) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

Và cùng một mã trong giải pháp JavaScript vanilla:

//setup before functions
let typingTimer;                //timer identifier
let doneTypingInterval = 5000;  //time in ms (5 seconds)
let myInput = document.getElementById('myInput');

//on keyup, start the countdown
myInput.addEventListener('keyup', () => {
    clearTimeout(typingTimer);
    if (myInput.value) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

Giải pháp này sử dụng ES6 nhưng không cần thiết ở đây. Chỉ cần thay thế letbằng varvà chức năng mũi tên bằng một chức năng thông thường.

Nó chỉ là một dòng với chức năng gỡ lỗi underscore.js :

$('#my-input-box').keyup(_.debounce(doSomething , 500));

Điều này về cơ bản nói doS Something 500 mili giây sau khi tôi ngừng gõ.

Để biết thêm thông tin: http://underscorejs.org/#debounce

Có, bạn có thể đặt thời gian chờ là 2 giây cho mỗi sự kiện bật phím sẽ thực hiện yêu cầu ajax. Bạn cũng có thể lưu trữ phương thức XHR và hủy bỏ nó trong các sự kiện nhấn phím tiếp theo để bạn tiết kiệm băng thông hơn nữa. Đây là thứ tôi đã viết cho một kịch bản tự động hoàn thành của tôi.

var timer;
var x;

$(".some-input").keyup(function () {
    if (x) { x.abort() } // If there is an existing XHR, abort it.
    clearTimeout(timer); // Clear the timer so we don't end up with dupes.
    timer = setTimeout(function() { // assign timer a new timeout 
        x = $.getJSON(...); // run ajax request and store in x variable (so we can cancel)
    }, 2000); // 2000ms delay, tweak for faster/slower
});

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

Đánh dấu

var timer;
var timeout = 1000;

$('#in').keyup(function(){
    clearTimeout(timer);
    if ($('#in').val) {
        timer = setTimeout(function(){
            //do stuff here e.g ajax call etc....
             var v = $("#in").val();
             $("#out").html(v);
        }, timeout);
    }
});

ví dụ đầy đủ ở đây: http://jsfiddle.net/ZYXp4/8/

Cả hai câu trả lời hàng đầu không làm việc cho tôi. Vì vậy, đây là giải pháp của tôi:

var timeout = null;

$('#myInput').keyup(function() {
    clearTimeout(timeout);

    timeout = setTimeout(function() {
        //do stuff here
    }, 500);
});

Tôi thích câu trả lời của Surreal Dream nhưng tôi thấy rằng chức năng "DoneTyping" của tôi sẽ kích hoạt cho mọi phím bấm, tức là nếu bạn gõ "Xin chào" thực sự nhanh chóng; thay vì bắn chỉ một lần khi bạn ngừng gõ, chức năng sẽ kích hoạt 5 lần.

Vấn đề là chức năng setTimeout javascript không xuất hiện để ghi đè hoặc giết bất kỳ thời gian chờ cũ nào đã được đặt, nhưng nếu bạn tự làm thì nó hoạt động! Vì vậy, tôi vừa thêm một cuộc gọi ClearTimeout ngay trước setTimeout nếu bộ gõTimer được đặt. Xem bên dưới:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example

//on keyup, start the countdown
$('#myInput').on("keyup", function(){
    if (typingTimer) clearTimeout(typingTimer);                 // Clear if already set     
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('#myInput').on("keydown", function(){
    clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

NB Tôi muốn thêm vào đây như một nhận xét cho câu trả lời của Surreal Dream nhưng tôi là người dùng mới và không có đủ danh tiếng. Lấy làm tiếc!

Sửa đổi câu trả lời được chấp nhận để xử lý các trường hợp bổ sung như dán:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 2000;  //time in ms, 2 second for example
var $input = $('#myInput');

// updated events 
$input.on('input propertychange paste', function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);      
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}

Tôi không nghĩ sự kiện keyDown là cần thiết trong trường hợp này (vui lòng cho tôi biết lý do nếu tôi sai). Trong kịch bản tương tự (không phải jquery) của tôi trông giống như vậy:

var _timer, _timeOut = 2000; 



function _onKeyUp(e) {
    clearTimeout(_timer);
    if (e.keyCode == 13) {      // close on ENTER key
        _onCloseClick();
    } else {                    // send xhr requests
        _timer = window.setTimeout(function() {
            _onInputChange();
        }, _timeOut)
    }

}

Đây là câu trả lời đầu tiên của tôi về Stack Overflow, vì vậy tôi hy vọng điều này sẽ giúp được ai đó, một ngày nào đó :)

Khai báo delayhàm sau :

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

và sau đó sử dụng nó:

let $filter = $('#item-filter');
$filter.on('keydown', function () {
    delay(function () {            
        console.log('this will hit, once user has not typed for 1 second');            
    }, 1000);
});    

Câu trả lời muộn nhưng tôi thêm nó bởi vì đó là năm 2019 và điều này hoàn toàn có thể đạt được bằng cách sử dụng ES6 đẹp, không có thư viện bên thứ ba và tôi thấy hầu hết các câu trả lời được đánh giá cao đều cồng kềnh và nặng nề với quá nhiều biến số.

Giải pháp thanh lịch được lấy từ bài viết blog tuyệt vời này.

function debounce(callback, wait) {
  let timeout;
  return (...args) => {
      const context = this;
      clearTimeout(timeout);
      timeout = setTimeout(() => callback.apply(context, args), wait);
  };
}

window.addEventListener('keyup', debounce( () => {
    // code you would like to run 1000ms after the keyup event has stopped firing
    // further keyup events reset the timer, as expected
}, 1000))

Vâng, nói đúng là không, vì máy tính không thể đoán khi người dùng gõ xong. Tất nhiên bạn có thể kích hoạt bộ hẹn giờ khi bật phím và đặt lại trên mỗi phím tiếp theo. Nếu hết giờ, người dùng đã không nhập thời lượng hẹn giờ - bạn có thể gọi đó là "gõ xong".

Nếu bạn muốn người dùng tạm dừng trong khi gõ, không có cách nào để biết khi nào họ hoàn thành.

(Tất nhiên trừ khi bạn có thể nói từ dữ liệu khi chúng được thực hiện)

Tôi cảm thấy giải pháp có phần đơn giản hơn một chút với inputsự kiện này:

var typingTimer;
var doneTypingInterval = 500;

$("#myInput").on("input", function () {
    window.clearTimeout(typingTimer);
    typingTimer = window.setTimeout(doneTyping, doneTypingInterval);
});

function doneTyping () {
    // code here
}

đồng ý với câu trả lời của @ gửi. Một giải pháp tương tự khác làm việc cho tôi là giải pháp dưới đây. Sự khác biệt duy nhất là tôi đang sử dụng .on ("input" ...) thay vì keyup. Điều này chỉ nắm bắt những thay đổi trong đầu vào. các phím khác như Ctrl, Shift, v.v.

var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on input change, start the countdown

$('#myInput').on("input", function() {    
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function(){
        // doSomething...
    }, doneTypingInterval);
});

Tôi chỉ cần tìm ra một mã đơn giản để chờ người dùng nhập xong:

Bước 1. đặt hết thời gian thành null rồi xóa thời gian chờ hiện tại khi người dùng đang gõ.

Bước 2.triết hết thời gian chờ để xác định biến trước khi kích hoạt sự kiện keyup.

bước 3. xác định thời gian chờ cho biến được khai báo ở trên;

<input type="text" id="input" placeholder="please type" style="padding-left:20px;"/>
<div class="data"></div>

mã javascript

var textInput = document.getElementById('input');
var textdata = document.querySelector('.data');
// Init a timeout variable to be used below
var timefired = null;

// Listen for keystroke events
// Init a timeout variable to be used below
var timefired = null;// Listen for keystroke events
textInput.onkeyup = function (event) {
clearTimeout(timefired);
timefired = setTimeout(function () {
    textdata.innerHTML = 'Input Value:'+ textInput.value;
  }, 600);
};

Tôi đã thực hiện tìm kiếm trong danh sách của mình và cần nó để dựa trên ajax. Điều đó có nghĩa là trên mỗi thay đổi chính, kết quả tìm kiếm phải được cập nhật và hiển thị. Điều này dẫn đến rất nhiều cuộc gọi ajax được gửi đến máy chủ, đó không phải là một điều tốt.

Sau khi làm việc, tôi đã thực hiện một cách tiếp cận ping máy chủ khi người dùng dừng gõ.

Giải pháp này hiệu quả với tôi:

$(document).ready(function() {
    $('#yourtextfield').keyup(function() {
        s = $('#yourtextfield').val();
        setTimeout(function() { 
            if($('#yourtextfield').val() == s){ // Check the value searched is the latest one or not. This will help in making the ajax call work when client stops writing.
                $.ajax({
                    type: "POST",
                    url: "yoururl",
                    data: 'search=' + s,
                    cache: false,
                    beforeSend: function() {
                       // loading image
                    },
                    success: function(data) {
                        // Your response will come here
                    }
                })
            }
        }, 1000); // 1 sec delay to check.
    }); // End of  keyup function
}); // End of document.ready

Bạn sẽ nhận thấy rằng không cần sử dụng bất kỳ bộ đếm thời gian nào trong khi thực hiện điều này.

Đây là một mã JS đơn giản mà tôi đã viết:

<!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>

Bạn có thể sử dụng sự kiện onblur để phát hiện khi hộp văn bản mất tiêu điểm: https://developer.mozilla.org/en/DOM/element.onblur

Điều đó không giống như "dừng gõ", nếu bạn quan tâm đến trường hợp người dùng gõ một loạt các công cụ và sau đó ngồi đó với hộp văn bản vẫn tập trung.

Vì vậy, tôi sẽ đề nghị buộc setTimeout vào sự kiện onclick và giả sử rằng sau x lượng thời gian không có tổ hợp phím, người dùng đã ngừng nhập.

Tại sao không sử dụng onf Focusout?

https://www.w3schools.com/jsreF/event_onf Focusout.asp

Nếu đó là một hình thức, họ sẽ luôn để lại tiêu điểm của mọi trường đầu vào để nhấp vào nút gửi để bạn biết rằng không có đầu vào nào bị bỏ lỡ khi nhận được trình xử lý sự kiện onf Focusout của nó.

Nếu cần thiết để người dùng di chuyển khỏi trường, chúng ta có thể sử dụng "onBlur" thay vì Onchange trong Javascript

  <TextField id="outlined-basic"  variant="outlined" defaultValue={CardValue} onBlur={cardTitleFn} />

Nếu không cần thiết, bộ hẹn giờ sẽ là lựa chọn tốt.

Khi bạn phát hiện tiêu điểm trên hộp văn bản, hãy bật phím lên để kiểm tra thời gian chờ và đặt lại mỗi lần nó được kích hoạt.

Khi thời gian chờ hoàn thành, hãy thực hiện yêu cầu ajax của bạn.

Nếu bạn đang tìm kiếm một độ dài cụ thể (chẳng hạn như trường mã zip):

$("input").live("keyup", function( event ){
if(this.value.length == this.getAttribute('maxlength')) {
        //make ajax request here after.
    }
  });

Không chắc chắn nếu nhu cầu của tôi chỉ là kỳ lạ, nhưng tôi cần một cái gì đó tương tự như thế này và đây là những gì tôi đã kết thúc bằng cách sử dụng:

$('input.update').bind('sync', function() {
    clearTimeout($(this).data('timer'));            
    $.post($(this).attr('data-url'), {value: $(this).val()}, function(x) {
        if(x.success != true) {
            triggerError(x.message);    
        }
    }, 'json');
}).keyup(function() {
    clearTimeout($(this).data('timer'));
    var val = $.trim($(this).val());
    if(val) {
        var $this = $(this);
        var timer = setTimeout(function() {
            $this.trigger('sync');
        }, 2000);
        $(this).data('timer', timer);
    }
}).blur(function() {
    clearTimeout($(this).data('timer'));     
    $(this).trigger('sync');
});

Điều này cho phép tôi có các yếu tố như thế này trong ứng dụng của mình:

<input type="text" data-url="/controller/action/" class="update">

Được cập nhật khi người dùng "gõ xong" (không có hành động trong 2 giây) hoặc chuyển sang trường khác (làm mờ phần tử)

Nếu bạn cần đợi cho đến khi người dùng kết thúc với việc gõ, hãy sử dụng đơn giản như sau:

$(document).on('change','#PageSize', function () {
    //Do something after new value in #PageSize       
});

Ví dụ hoàn chỉnh với cuộc gọi ajax - cách này hoạt động cho máy nhắn tin của tôi - số lượng mục trên mỗi danh sách:

$(document).ready(function () {
    $(document).on('change','#PageSize', function (e) {
        e.preventDefault();
        var page = 1;
        var pagesize = $("#PageSize").val();
        var q = $("#q").val();
        $.ajax({
            url: '@Url.Action("IndexAjax", "Materials", new { Area = "TenantManage" })',
            data: { q: q, pagesize: pagesize, page: page },
            type: 'post',
            datatype: "json",
            success: function (data) {
                $('#tablecontainer').html(data);
               // toastr.success('Pager has been changed', "Success!");
            },
            error: function (jqXHR, exception) {
                ShowErrorMessage(jqXHR, exception);
            }
        });  
    });
});    

Nhiều bộ định thời trên mỗi trang

Tất cả các câu trả lời khác chỉ hoạt động cho một điều khiển ( bao gồm câu trả lời khác của tôi ). Nếu bạn có nhiều điều khiển trên mỗi trang (ví dụ: trong giỏ hàng), chỉ điều khiển cuối cùng mà người dùng đã nhập một cái gì đó sẽ được gọi . Trong trường hợp của tôi, đây chắc chắn không phải là hành vi mong muốn - mỗi điều khiển nên có bộ đếm thời gian riêng.

Để giải quyết vấn đề này, bạn chỉ cần truyền ID cho hàm và duy trì từ điển timeoutHandles như trong đoạn mã sau:

Tuyên bố chức năng:

var delayUserInput = (function () {
    var timeoutHandles = {};    
    return function (id, callback, ms) {        
        if (timeoutHandles[id]) {
            clearTimeout(timeoutHandles[id]);
        }

        timeoutHandles[id] = setTimeout(callback, ms);             
    };
})();

Chức năng sử dụng:

  delayUserInput('yourID', function () {
     //do some stuff
  }, 1000);

Đơn giản và dễ hiểu.

var mySearchTimeout;
$('#ctl00_mainContent_CaseSearch').keyup(function () {
   clearTimeout(mySearchTimeout);
   var filter = $(this).val();
   mySearchTimeout = setTimeout(function () { myAjaxCall(filter); }, 700);
   return true;
});

Để truyền tham số cho hàm của bạn cùng với cú pháp ES6.

$(document).ready(() => {
    let timer = null;
     $('.classSelector').keydown(() => {
     clearTimeout(timer); 
     timer = setTimeout(() => foo('params'), 500);
  });
});

const foo = (params) => {
  console.log(`In foo ${params}`);
}

Wow, thậm chí 3 bình luận là khá chính xác!

1. Đầu vào trống không phải là lý do để bỏ qua chức năng gọi, ví dụ: tôi xóa tham số thải khỏi url trước khi chuyển hướng

2. .on ('input', function() { ... });nên được sử dụng để kích hoạt keyup, pastevà changesự kiện

3. chắc chắn .val()hoặc .valuephải được sử dụng

4. Bạn có thể sử dụng $(this)chức năng bên trong sự kiện thay vì #idlàm việc với nhiều đầu vào

5. (quyết định của tôi) Tôi sử dụng chức năng ẩn danh thay vì doneTypingvào setTimeoutđể dễ dàng truy cập $(this)từ n.4, nhưng trước tiên bạn cần lưu nó như thế nàovar $currentInput = $(this);

EDIT Tôi thấy rằng một số người không hiểu chỉ đường mà không có khả năng sao chép-dán mã sẵn sàng. Đây là bạn

var typingTimer;
//                  2
$("#myinput").on('input', function () {
    //             4     3
    var input = $(this).val();
    clearTimeout(typingTimer);
    //                           5
    typingTimer = setTimeout(function() {
        // do something with input
        alert(input);
    }, 5000);      
});