Làm cách nào để trì hoãn trình xử lý .keyup () cho đến khi người dùng dừng gõ?

Tôi đã có một trường tìm kiếm. Ngay bây giờ nó tìm kiếm cho mọi keyup. Vì vậy, nếu ai đó gõ vào Windows Windows, nó sẽ thực hiện tìm kiếm với AJAX cho mỗi lần gõ phím: W W,, Wi Wi,, Win Win, Hồi Gió, Hồi Windo, Một cửa sổ, Một cửa sổ,

Tôi muốn có độ trễ, vì vậy nó chỉ tìm kiếm khi người dùng dừng gõ trong 200 ms.

Không có tùy chọn nào cho keyupchức năng này và tôi đã thử setTimeout, nhưng nó không hoạt động.

Làm thế nào tôi có thể làm điều đó?

Tôi sử dụng chức năng nhỏ này cho cùng một mục đích, thực hiện một chức năng sau khi người dùng đã dừng nhập trong một khoảng thời gian xác định hoặc trong các sự kiện phát ra với tốc độ cao, như resize:

function delay(callback, ms) {
  var timer = 0;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      callback.apply(context, args);
    }, ms || 0);
  };
}


// Example usage:

$('#input').keyup(delay(function (e) {
  console.log('Time elapsed!', this.value);
}, 500));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="input">Try it:
<input id="input" type="text" placeholder="Type something here..."/>
</label>

Làm thế nào nó hoạt động:

Các delaychức năng sẽ trả về hàm bọc rằng trong nội bộ xử lý một bộ đếm thời gian cá nhân, trong từng thực hiện bộ đếm thời gian khởi động lại với thời gian trễ được cung cấp, nếu nhiều hành quyết xảy ra trước thời điểm này đi, bộ đếm thời gian sẽ chỉ thiết lập lại và bắt đầu lại.

Khi bộ định thời cuối cùng kết thúc, hàm gọi lại được thực thi, chuyển ngữ cảnh và đối số ban đầu (trong ví dụ này, đối tượng sự kiện của jQuery và phần tử DOM là this).

CẬP NHẬT 2019-05-16

Tôi đã triển khai lại chức năng bằng các tính năng ES5 và ES6 cho các môi trường hiện đại:

function delay(fn, ms) {
  let timer = 0
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(fn.bind(this, ...args), ms || 0)
  }
}

Việc thực hiện được bao phủ với một loạt các thử nghiệm .

Đối với một cái gì đó tinh vi hơn, hãy xem plugin jQuery typewatch .

Nếu bạn muốn tìm kiếm sau khi loại xong, hãy sử dụng biến toàn cục để giữ thời gian chờ được trả về từ setTimoutcuộc gọi của bạn và hủy cuộc gọi clearTimeoutnếu nó chưa xảy ra để nó không kích hoạt thời gian chờ ngoại trừ keyupsự kiện cuối cùng

var globalTimeout = null;  
$('#id').keyup(function(){
  if(globalTimeout != null) clearTimeout(globalTimeout);  
  globalTimeout =setTimeout(SearchFunc,200);  
}   
function SearchFunc(){  
  globalTimeout = null;  
  //ajax code
}

Hoặc với chức năng ẩn danh:

var globalTimeout = null;  
$('#id').keyup(function() {
  if (globalTimeout != null) {
    clearTimeout(globalTimeout);
  }
  globalTimeout = setTimeout(function() {
    globalTimeout = null;  

    //ajax code

  }, 200);  
}   

Một cải tiến nhỏ khác về câu trả lời của CMS. Để dễ dàng cho phép trì hoãn riêng biệt, bạn có thể sử dụng như sau:

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

Nếu bạn muốn sử dụng lại độ trễ tương tự, chỉ cần làm

var delay = makeDelay(250);
$(selector1).on('keyup', function() {delay(someCallback);});
$(selector2).on('keyup', function() {delay(someCallback);});

Nếu bạn muốn trì hoãn riêng biệt, bạn có thể làm

$(selector1).on('keyup', function() {makeDelay(250)(someCallback);});
$(selector2).on('keyup', function() {makeDelay(250)(someCallback);});

Bạn cũng có thể xem underscore.js , cung cấp các phương thức tiện ích như gỡ lỗi :

var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);

Dựa trên câu trả lời của CMS, tôi đã thực hiện điều này:

Đặt mã bên dưới sau khi bao gồm jQuery:

/*
 * delayKeyup
 * http://code.azerti.net/javascript/jquery/delaykeyup.htm
 * Inspired by CMS in this post : http://stackoverflow.com/questions/1909441/jquery-keyup-delay
 * Written by Gaten
 * Exemple : $("#input").delayKeyup(function(){ alert("5 secondes passed from the last event keyup."); }, 5000);
 */
(function ($) {
    $.fn.delayKeyup = function(callback, ms){
        var timer = 0;
        $(this).keyup(function(){                   
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        });
        return $(this);
    };
})(jQuery);

Và chỉ cần sử dụng như thế này:

$('#input').delayKeyup(function(){ alert("5 secondes passed from the last event keyup."); }, 5000);

Cẩn thận: biến $ (this) trong hàm được truyền dưới dạng tham số không khớp với đầu vào

Trì hoãn các cuộc gọi đa chức năng bằng nhãn

Đây là giải pháp tôi làm việc với. Nó sẽ trì hoãn việc thực hiện trên bất kỳ chức năng nào bạn muốn . Nó có thể là truy vấn tìm kiếm phím tắt, có thể là nhấp nhanh vào các nút trước đó hoặc tiếp theo (nếu không thì sẽ gửi nhiều yêu cầu nếu nhấp nhanh liên tục và sau đó không được sử dụng). Điều này sử dụng một đối tượng toàn cầu lưu trữ từng thời gian thực hiện và so sánh nó với yêu cầu mới nhất.

Vì vậy, kết quả là chỉ có lần nhấp / hành động cuối cùng thực sự được gọi, bởi vì những yêu cầu đó được lưu trữ trong hàng đợi, sau khi X mili giây được gọi nếu không có yêu cầu nào khác có cùng nhãn trong hàng đợi!

function delay_method(label,callback,time){
    if(typeof window.delayed_methods=="undefined"){window.delayed_methods={};}  
    delayed_methods[label]=Date.now();
    var t=delayed_methods[label];
    setTimeout(function(){ if(delayed_methods[label]!=t){return;}else{  delayed_methods[label]=""; callback();}}, time||500);
  }

Bạn có thể đặt thời gian trễ của riêng mình (tùy chọn, mặc định là 500ms). Và gửi các đối số chức năng của bạn theo kiểu "đóng cửa".

Ví dụ: nếu bạn muốn gọi hàm dưới đây:

function send_ajax(id){console.log(id);}

Để ngăn nhiều yêu cầu send_ajax, bạn trì hoãn chúng bằng cách sử dụng:

delay_method( "check date", function(){ send_ajax(2); } ,600);

Mọi yêu cầu sử dụng nhãn "ngày kiểm tra" sẽ chỉ được kích hoạt nếu không có yêu cầu nào khác được thực hiện trong khung thời gian 600 triệu giây. Đối số này là tùy chọn

Nhãn độc lập (gọi cùng chức năng đích) nhưng chạy cả hai:

delay_method("check date parallel", function(){send_ajax(2);});
delay_method("check date", function(){send_ajax(2);});

Kết quả trong việc gọi cùng một chức năng nhưng trì hoãn chúng một cách độc lập vì nhãn của chúng khác nhau

Nếu ai đó muốn trì hoãn chức năng tương tự và không có biến ngoài, anh ta có thể sử dụng tập lệnh tiếp theo:

function MyFunction() {

    //Delaying the function execute
    if (this.timer) {
        window.clearTimeout(this.timer);
    }
    this.timer = window.setTimeout(function() {

        //Execute the function code here...

    }, 500);
}

Cách tiếp cận siêu đơn giản, được thiết kế để chạy một chức năng sau khi người dùng nhập xong vào trường văn bản ...

<script type="text/javascript">
$(document).ready(function(e) {
    var timeout;
    var delay = 2000;   // 2 seconds

    $('.text-input').keyup(function(e) {
        console.log("User started typing!");
        if(timeout) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(function() {
            myFunction();
        }, delay);
    });

    function myFunction() {
        console.log("Executing function for user!");
    }
});
</script>

<textarea name="text-input" class="text-input"></textarea>

Hàm này mở rộng hàm từ câu trả lời của Gaten một chút để lấy lại phần tử:

$.fn.delayKeyup = function(callback, ms){
    var timer = 0;
    var el = $(this);
    $(this).keyup(function(){                   
    clearTimeout (timer);
    timer = setTimeout(function(){
        callback(el)
        }, ms);
    });
    return $(this);
};

$('#input').delayKeyup(function(el){
    //alert(el.val());
    // Here I need the input element (value for ajax call) for further process
},1000);

http://jsfiddle.net/Us9bu/2/

Tôi ngạc nhiên khi không ai đề cập đến vấn đề với nhiều đầu vào trong snipped rất hay của CMS.

Về cơ bản, bạn sẽ phải xác định biến độ trễ riêng cho từng đầu vào. Mặt khác, nếu sb đặt văn bản vào đầu vào đầu tiên và nhanh chóng chuyển sang đầu vào khác và bắt đầu nhập, gọi lại cho lần đầu tiên KHÔNG được gọi!

Xem mã dưới đây tôi đi kèm dựa trên các câu trả lời khác:

(function($) {
    /**
     * KeyUp with delay event setup
     * 
     * @link http://stackoverflow.com/questions/1909441/jquery-keyup-delay#answer-12581187
     * @param function callback
     * @param int ms
     */
    $.fn.delayKeyup = function(callback, ms){
            $(this).keyup(function( event ){
                var srcEl = event.currentTarget;
                if( srcEl.delayTimer )
                    clearTimeout (srcEl.delayTimer );
                srcEl.delayTimer = setTimeout(function(){ callback( $(srcEl) ); }, ms);
            });

        return $(this);
    };
})(jQuery);

Giải pháp này giữ tham chiếu setTimeout trong biến delayTimer của đầu vào. Nó cũng chuyển tham chiếu của phần tử để gọi lại như fazzyx đề xuất.

Đã thử nghiệm trong IE6, 8 (comp - 7), 8 và Opera 12.11.

Điều này làm việc cho tôi khi tôi trì hoãn hoạt động logic tìm kiếm và kiểm tra xem giá trị có giống như được nhập trong trường văn bản không. Nếu giá trị là như nhau thì tôi tiếp tục và thực hiện thao tác cho dữ liệu liên quan đến giá trị tìm kiếm.

$('#searchText').on('keyup',function () {
    var searchValue = $(this).val();
    setTimeout(function(){
        if(searchValue == $('#searchText').val() && searchValue != null && searchValue != "") {
           // logic to fetch data based on searchValue
        }
        else if(searchValue == ''){
           // logic to load all the data
        }
    },300);
});

Chức năng trì hoãn để gọi lên trên mỗi keyup. Yêu cầu jQuery 1.7.1 trở lên

jQuery.fn.keyupDelay = function( cb, delay ){
  if(delay == null){
    delay = 400;
  }
  var timer = 0;
  return $(this).on('keyup',function(){
    clearTimeout(timer);
    timer = setTimeout( cb , delay );
  });
}

Sử dụng: $('#searchBox').keyupDelay( cb );

Đây là một giải pháp dọc theo dòng của CMS, nhưng giải quyết một vài vấn đề chính cho tôi:

• Hỗ trợ nhiều đầu vào, độ trễ có thể chạy đồng thời.
• Bỏ qua các sự kiện chính không thay đổi giá trị (như Ctrl, Alt + Tab).
• Giải quyết một điều kiện cuộc đua (khi thực hiện cuộc gọi lại và giá trị đã thay đổi).

var delay = (function() {
    var timer = {}
      , values = {}
    return function(el) {
        var id = el.form.id + '.' + el.name
        return {
            enqueue: function(ms, cb) {
                if (values[id] == el.value) return
                if (!el.value) return
                var original = values[id] = el.value
                clearTimeout(timer[id])
                timer[id] = setTimeout(function() {
                    if (original != el.value) return // solves race condition
                    cb.apply(el)
                }, ms)
            }
        }
    }
}())

Sử dụng:

signup.key.addEventListener('keyup', function() {
    delay(this).enqueue(300, function() {
        console.log(this.value)
    })
})

Mã được viết theo phong cách tôi thích, bạn có thể cần thêm một loạt dấu chấm phẩy.

Những điều cần lưu ý:

• Một id duy nhất được tạo dựa trên id mẫu và tên đầu vào, vì vậy chúng phải được xác định và duy nhất hoặc bạn có thể điều chỉnh nó theo tình huống của mình.
• trì hoãn trả về một đối tượng dễ dàng mở rộng cho nhu cầu của riêng bạn.
• Phần tử ban đầu được sử dụng cho độ trễ được liên kết với hàm gọi lại, do đó thishoạt động như mong đợi (như trong ví dụ).
• Giá trị trống được bỏ qua trong xác nhận thứ hai.
• Xem ra cho enqueue , nó mong đợi mili giây đầu tiên, tôi thích điều đó, nhưng bạn có thể muốn chuyển đổi các tham số cho phù hợp setTimeout.

Giải pháp tôi sử dụng thêm một mức độ phức tạp khác, cho phép bạn hủy thực thi, ví dụ, nhưng đây là một cơ sở tốt để xây dựng.

Kết hợp câu trả lời CMS với câu trả lời của Miguel mang lại một giải pháp mạnh mẽ cho phép trì hoãn đồng thời.

var delay = (function(){
    var timers = {};
    return function (callback, ms, label) {
        label = label || 'defaultTimer';
        clearTimeout(timers[label] || 0);
        timers[label] = setTimeout(callback, ms);
    };
})();

Khi bạn cần trì hoãn các hành động khác nhau một cách độc lập, hãy sử dụng đối số thứ ba.

$('input.group1').keyup(function() {
    delay(function(){
        alert('Time elapsed!');
    }, 1000, 'firstAction');
});

$('input.group2').keyup(function() {
    delay(function(){
        alert('Time elapsed!');
    }, 1000, '2ndAction');
});

Dựa trên câu trả lời của CMS ở đây phương pháp trì hoãn mới bảo tồn 'cái này' trong cách sử dụng:

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

Sử dụng:

$('input').keyup(function() {
    delay(function(){
      alert('Time elapsed!');
    }, 1000, this);
});

Sử dụng

mytimeout = setTimeout( expression, timeout );

trong đó biểu thức là tập lệnh để chạy và thời gian chờ là thời gian chờ tính bằng mili giây trước khi nó chạy - điều này KHÔNG làm hỏng tập lệnh, mà chỉ trì hoãn việc thực thi phần đó cho đến khi hết thời gian.

clearTimeout(mytimeout);

sẽ đặt lại / xóa thời gian chờ để nó không chạy tập lệnh trong biểu thức (như hủy) miễn là nó chưa được thực thi.

Dựa trên câu trả lời của CMS, nó chỉ bỏ qua các sự kiện chính không thay đổi giá trị.

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

var duplicateFilter=(function(){
  var lastContent;
  return function(content,callback){
    content=$.trim(content);
    if(content!=lastContent){
      callback(content);
    }
    lastContent=content;
  };
})();

$("#some-input").on("keyup",function(ev){

  var self=this;
  delay(function(){
    duplicateFilter($(self).val(),function(c){
        //do sth...
        console.log(c);
    });
  }, 1000 );


})

Sử dụng plugin jQueryWithDelay :

element.bindWithDelay(eventType, [ eventData ], handler(eventObject), timeout, throttle)

var globalTimeout = null;  
$('#search').keyup(function(){
  if(globalTimeout != null) clearTimeout(globalTimeout);  
  globalTimeout =setTimeout(SearchFunc,200);  
});
function SearchFunc(){  
  globalTimeout = null;  
  console.log('Search: '+$('#search').val());
  //ajax code
};

Dưới đây là một gợi ý tôi đã viết để chăm sóc nhiều đầu vào trong biểu mẫu của bạn.

Hàm này lấy Đối tượng của trường đầu vào, đặt mã của bạn vào

function fieldKeyup(obj){
    //  what you want this to do

} // fieldKeyup

Đây là hàm delayCall thực tế, đảm nhiệm nhiều trường đầu vào

function delayCall(obj,ms,fn){
    return $(obj).each(function(){
    if ( typeof this.timer == 'undefined' ) {
       // Define an array to keep track of all fields needed delays
       // This is in order to make this a multiple delay handling     
          function
        this.timer = new Array();
    }
    var obj = this;
    if (this.timer[obj.id]){
        clearTimeout(this.timer[obj.id]);
        delete(this.timer[obj.id]);
    }

    this.timer[obj.id] = setTimeout(function(){
        fn(obj);}, ms);
    });
}; // delayCall

Sử dụng:

$("#username").on("keyup",function(){
    delayCall($(this),500,fieldKeyup);
});

Từ ES6 , người ta cũng có thể sử dụng cú pháp hàm mũi tên .

Trong ví dụ này, mã trì hoãn keyupsự kiện trong 400ms sau khi người dùng nhập xong trước khi gọi searchFuncthực hiện một yêu cầu truy vấn.

const searchbar = document.getElementById('searchBar');
const searchFunc = // any function

// wait ms (milliseconds) after user stops typing to execute func
const delayKeyUp = (() => {
    let timer = null;
    const delay = (func, ms) => {
        timer ? clearTimeout(timer): null
        timer = setTimeout(func, ms)
    }
    return delay
})();

searchbar.addEventListener('keyup', (e) => {
    const query = e.target.value;
    delayKeyUp(() => {searchFunc(query)}, 400);
})

jQuery :

var timeout = null;
$('#input').keyup(function() {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
      console.log($(this).val());
  }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="text" id="input" placeholder="Type here..."/>

Javascript thuần túy:

let input = document.getElementById('input');
let timeout = null;

input.addEventListener('keyup', function (e) {
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        console.log('Value:', input.value);
    }, 1000);
});

<input type="text" id="input" placeholder="Type here..."/>

Hãy xem các plugin tự động hoàn thành . Tôi biết rằng nó cho phép bạn chỉ định độ trễ hoặc số lượng ký tự tối thiểu. Ngay cả khi bạn không sử dụng plugin, việc xem qua mã sẽ cho bạn một số ý tưởng về cách tự thực hiện.

Vâng, tôi cũng đã tạo một đoạn mã để giới hạn yêu cầu ajax tần số cao gây ra bởi Keyup / Keydown. Kiểm tra này:

https://github.com/raincious/jQueue

Thực hiện truy vấn của bạn như thế này:

var q = new jQueue(function(type, name, callback) {
    return $.post("/api/account/user_existed/", {Method: type, Value: name}).done(callback);
}, 'Flush', 1500); // Make sure use Flush mode.

Và liên kết sự kiện như thế này:

$('#field-username').keyup(function() {
    q.run('Username', this.val(), function() { /* calling back */ });
});

Hôm nay thấy hơi muộn nhưng chỉ muốn đặt cái này ở đây trong trường hợp có người khác cần. chỉ cần tách chức năng để làm cho nó có thể tái sử dụng. đoạn mã dưới đây sẽ đợi 1/2 giây sau khi gõ dừng.

    var timeOutVar
$(selector).on('keyup', function() {

                    clearTimeout(timeOutVar);
                    timeOutVar= setTimeout(function(){ console.log("Hello"); }, 500);
                });

Tài lodash thư viện javascript và chức năng sử dụng _.debounce

changeName: _.debounce(function (val) {
  console.log(val)                
}, 1000)

// Get an global variable isApiCallingInProgress

//  check isApiCallingInProgress 
if (!isApiCallingInProgress) {
// set it to isApiCallingInProgress true
      isApiCallingInProgress = true;

      // set timeout
      setTimeout(() => {
         // Api call will go here

        // then set variable again as false
        isApiCallingInProgress = false;     
      }, 1000);
}