Bagaimana cara menunda penangan .keyup () sampai pengguna berhenti mengetik?

Saya punya bidang pencarian. Saat ini ia mencari setiap keyup. Jadi jika seseorang mengetik "Windows", itu akan melakukan pencarian dengan AJAX untuk setiap keyup: "W", "Wi", "Win", "Wind", "Windo", "Window", "Windows".

Saya ingin menunda, jadi hanya mencari ketika pengguna berhenti mengetik untuk 200 ms.

Tidak ada opsi untuk ini dalam keyupfungsi, dan saya sudah mencoba setTimeout, tetapi tidak berhasil.

Bagaimana saya bisa melakukan itu?

Saya menggunakan fungsi kecil ini untuk tujuan yang sama, menjalankan fungsi setelah pengguna berhenti mengetik untuk jumlah waktu tertentu atau dalam peristiwa yang memecat pada tingkat tinggi, seperti 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>

Bagaimana itu bekerja:

The delayfungsi akan mengembalikan fungsi dibungkus bahwa secara internal menangani timer individu, di setiap eksekusi timer-restart dengan waktu tunda yang disediakan, jika beberapa eksekusi terjadi sebelum waktu ini berlalu, timer hanya akan mengatur ulang dan mulai lagi.

Ketika penghitung waktu akhirnya berakhir, fungsi panggilan balik dieksekusi, melewati konteks dan argumen asli (dalam contoh ini, objek acara jQuery, dan elemen DOM sebagai this).

UPDATE 2019-05-16

Saya telah mengimplementasikan kembali fungsi menggunakan fitur ES5 dan ES6 untuk lingkungan modern:

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

Implementasi ditutup dengan serangkaian tes .

Untuk sesuatu yang lebih canggih, lihat plugin jQuery Typewatch .

Jika Anda ingin mencari setelah jenis selesai gunakan variabel global untuk menahan batas waktu kembali dari setTimoutpanggilan Anda dan membatalkannya dengan clearTimeoutjika belum terjadi sehingga tidak akan memadamkan batas waktu kecuali pada keyupacara terakhir

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

Atau dengan fungsi anonim:

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

    //ajax code

  }, 200);  
}   

Peningkatan kecil lain pada jawaban CMS. Untuk memudahkan penundaan yang terpisah, Anda dapat menggunakan yang berikut:

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

Jika Anda ingin menggunakan kembali penundaan yang sama, lakukan saja

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

Jika Anda ingin penundaan terpisah, Anda dapat melakukannya

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

Anda juga dapat melihat underscore.js , yang menyediakan metode utilitas seperti debounce :

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

Berdasarkan jawaban CMS, saya membuat ini:

Masukkan kode di bawah ini setelah menyertakan 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);

Dan cukup gunakan seperti ini:

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

Hati-hati: variabel $ (ini) pada fungsi yang diteruskan sebagai parameter tidak cocok dengan input

Tunda Panggilan Multi Fungsi menggunakan Label

Ini adalah solusi yang saya kerjakan. Ini akan menunda eksekusi pada fungsi APAPUN yang Anda inginkan . Ini bisa berupa permintaan pencarian keydown, mungkin klik cepat pada tombol sebelumnya atau berikutnya (yang sebaliknya akan mengirim beberapa permintaan jika diklik dengan cepat terus menerus, dan tidak digunakan sama sekali). Ini menggunakan objek global yang menyimpan setiap waktu eksekusi, dan membandingkannya dengan permintaan terbaru.

Jadi hasilnya adalah hanya klik / tindakan terakhir yang akan dipanggil, karena permintaan tersebut disimpan dalam antrian, setelah X milidetik dipanggil jika tidak ada permintaan lain dengan label yang sama ada di antrian!

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

Anda dapat mengatur waktu tunda Anda sendiri (opsional, default ke 500 ms). Dan kirim argumen fungsi Anda dalam "mode penutupan".

Misalnya jika Anda ingin memanggil fungsi di bawah ini:

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

Untuk mencegah beberapa permintaan send_ajax, Anda menunda menggunakan:

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

Setiap permintaan yang menggunakan label "tanggal cek" hanya akan dipicu jika tidak ada permintaan lain yang dibuat dalam jangka waktu 600 milidetik. Argumen ini opsional

Label independensi (memanggil fungsi target yang sama) tetapi jalankan keduanya:

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

Hasilnya memanggil fungsi yang sama tetapi menunda mereka secara independen karena label mereka berbeda

Jika seseorang suka menunda fungsi yang sama, dan tanpa variabel eksternal ia dapat menggunakan skrip berikutnya:

function MyFunction() {

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

        //Execute the function code here...

    }, 500);
}

Pendekatan super sederhana, dirancang untuk menjalankan fungsi setelah pengguna selesai mengetik dalam bidang teks ...

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

Fungsi ini sedikit memperluas fungsi dari jawaban Gaten untuk mendapatkan elemen kembali:

$.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/

Saya terkejut bahwa tidak ada yang menyebutkan masalah dengan beberapa input di CMS yang sangat bagus.

Pada dasarnya, Anda harus mendefinisikan variabel penundaan secara individual untuk setiap input. Kalau tidak, jika sb memasukkan teks ke input pertama dan dengan cepat melompat ke input lain dan mulai mengetik, panggilan balik untuk yang pertama TIDAK AKAN dipanggil!

Lihat kode di bawah saya datang dengan berdasarkan jawaban lain:

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

Solusi ini menjaga referensi setTimeout dalam variabel delayTimer input. Itu juga melewati referensi elemen ke callback seperti yang disarankan fazzyx.

Diuji dalam IE6, 8 (comp - 7), 8 dan Opera 12.11.

Ini berfungsi untuk saya di mana saya menunda operasi pencarian logika dan memeriksa apakah nilainya sama dengan yang dimasukkan dalam bidang teks. Jika nilainya sama maka saya melanjutkan dan melakukan operasi untuk data yang terkait dengan nilai pencarian.

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

Fungsi penundaan untuk memanggil pada setiap keyup. jQuery 1.7.1 atau lebih tinggi diperlukan

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

Pemakaian: $('#searchBox').keyupDelay( cb );

Ini adalah solusi di sepanjang jalur CMS, tetapi memecahkan beberapa masalah utama bagi saya:

• Mendukung banyak input, penundaan dapat berjalan secara bersamaan.
• Abaikan acara utama yang tidak mengubah nilai (seperti Ctrl, Alt + Tab).
• Memecahkan kondisi balapan (saat panggilan balik dijalankan dan nilainya sudah berubah).

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

Pemakaian:

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

Kode ditulis dalam gaya yang saya nikmati, Anda mungkin perlu menambahkan banyak titik koma.

Hal-hal yang perlu diingat:

• Id unik dihasilkan berdasarkan id formulir dan nama input, sehingga harus ditentukan dan unik, atau Anda dapat menyesuaikannya dengan situasi Anda.
• delay mengembalikan objek yang mudah diperluas untuk kebutuhan Anda sendiri.
• Elemen asli yang digunakan untuk penundaan terikat ke callback, jadi this berfungsi seperti yang diharapkan (seperti pada contoh).
• Nilai kosong diabaikan dalam validasi kedua.
• Hati-hati terhadap enqueue , ia mengharapkan milidetik pertama, saya lebih suka itu, tetapi Anda mungkin ingin mengganti parameter agar sesuai setTimeout.

Solusi yang saya gunakan menambah tingkat kerumitan lain, memungkinkan Anda untuk membatalkan eksekusi, misalnya, tetapi ini merupakan dasar yang baik untuk dikembangkan.

Menggabungkan jawaban CMS dengan jawaban Miguel menghasilkan solusi yang kuat yang memungkinkan penundaan bersamaan.

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

Ketika Anda perlu menunda tindakan yang berbeda secara mandiri, gunakan argumen ketiga.

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

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

Membangun jawaban CMS inilah metode penundaan baru yang mempertahankan 'ini' dalam penggunaannya:

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

Pemakaian:

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

Menggunakan

mytimeout = setTimeout( expression, timeout );

di mana ekspresi adalah skrip untuk menjalankan dan batas waktu adalah waktu untuk menunggu dalam milidetik sebelum dijalankan - ini TIDAK mengganggu skrip, tetapi hanya menunda eksekusi bagian itu sampai batas waktu selesai.

clearTimeout(mytimeout);

akan mengatur ulang / menghapus batas waktu sehingga skrip tersebut tidak dijalankan dalam ekspresi (seperti batal) selama belum dieksekusi.

Berdasarkan jawaban CMS, itu hanya mengabaikan acara utama yang tidak mengubah nilai.

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


})

Gunakan plugin bindWithDelay jQuery:

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

Berikut adalah saran yang saya tulis yang menangani beberapa input dalam formulir Anda.

Fungsi ini mendapatkan Objek bidang input, masukkan ke dalam kode Anda

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

} // fieldKeyup

Ini adalah fungsi delayCall yang sebenarnya, menangani beberapa bidang input

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

Pemakaian:

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

Dari ES6 , seseorang dapat menggunakan sintaks fungsi panah juga.

Dalam contoh ini, kode menunda keyupacara selama 400 ms setelah pengguna selesai mengetik sebelum menelepon searchFuncmembuat permintaan kueri.

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 murni:

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..."/>

Lihatlah plugin autocomplete . Saya tahu bahwa ini memungkinkan Anda untuk menentukan penundaan atau jumlah karakter minimum. Bahkan jika Anda tidak menggunakan plugin, melihat-lihat kode akan memberi Anda beberapa ide tentang bagaimana menerapkannya sendiri.

Yah, saya juga membuat sepotong kode untuk membatasi permintaan ajax frekuensi tinggi yang disebabkan oleh Keyup / Keydown. Lihat ini:

https://github.com/raincious/jQueue

Lakukan kueri Anda seperti ini:

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.

Dan ikat acara seperti ini:

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

Melihat ini hari ini sedikit terlambat tetapi hanya ingin meletakkan ini di sini kalau-kalau ada orang lain yang membutuhkan. pisahkan saja fungsi untuk membuatnya dapat digunakan kembali. kode di bawah ini akan menunggu 1/2 detik setelah mengetik berhenti.

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

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

Pengguna memasukkan pustaka javascript dan menggunakan fungsi _.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);
}