Jalankan fungsi javascript saat pengguna selesai mengetik, bukan pada tombol?

Saya ingin memicu permintaan ajax ketika pengguna selesai mengetik dalam kotak teks. Saya tidak ingin menjalankan fungsi pada setiap kali pengguna mengetik surat karena itu akan menghasilkan BANYAK permintaan ajax, namun saya tidak ingin mereka harus menekan tombol enter juga.

Apakah ada cara agar saya bisa mendeteksi ketika pengguna selesai mengetik dan kemudian melakukan permintaan ajax?

Menggunakan jQuery di sini! Dave

Jadi, saya akan menebak selesai mengetik berarti Anda hanya berhenti sebentar, katakan 5 detik. Maka dengan itu dalam pikiran, mari kita mulai waktu ketika pengguna melepaskan kunci dan menghapusnya ketika mereka menekan satu. Saya memutuskan input yang dimaksud adalah #myInput.

Membuat beberapa asumsi ...

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

Jawaban yang dipilih di atas tidak berfungsi.

Karena typingTimer kadang-kadang diatur beberapa kali (keyup ditekan dua kali sebelum keydown dipicu untuk pengetik cepat dll.) Maka itu tidak jelas dengan benar.

Solusi di bawah menyelesaikan masalah ini dan akan memanggil X detik setelah selesai sesuai permintaan OP. Itu juga tidak lagi membutuhkan fungsi keydown redundan. Saya juga telah menambahkan tanda centang sehingga panggilan fungsi Anda tidak akan terjadi jika input Anda kosong.

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

Dan kode yang sama dalam solusi vanilla JavaScript:

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

Solusi ini memang menggunakan ES6 tetapi tidak perlu di sini. Cukup ganti letdengan vardan fungsi panah dengan fungsi biasa.

Ini hanya satu baris dengan fungsi debounce underscore.js :

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

Ini pada dasarnya mengatakan doSomething 500 milidetik setelah saya berhenti mengetik.

Untuk info lebih lanjut: http://underscorejs.org/#debounce

Ya, Anda dapat mengatur batas waktu katakan 2 detik pada setiap dan setiap acara kunci yang akan memunculkan permintaan ajax. Anda juga dapat menyimpan metode XHR dan membatalkannya pada acara tekan tombol berikutnya sehingga Anda lebih menghemat bandwidth. Ini adalah sesuatu yang saya tulis untuk skrip pelengkapan otomatis saya.

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

Semoga ini membantu,

Marko

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

contoh lengkap di sini: http://jsfiddle.net/ZYXp4/8/

Kedua jawaban teratas tidak berfungsi untuk saya. Jadi, inilah solusi saya:

var timeout = null;

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

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

Saya menyukai jawaban Surreal Dream tetapi saya menemukan bahwa fungsi "doneTyping" saya akan menyala untuk setiap penekanan tombol, yaitu jika Anda mengetik "Halo" dengan sangat cepat; alih-alih menembak hanya sekali ketika Anda berhenti mengetik, fungsi akan menyala 5 kali.

Masalahnya adalah bahwa fungsi setTimeout javascript tampaknya tidak menimpa atau membunuh semua timeout lama yang telah ditetapkan, tetapi jika Anda melakukannya sendiri berfungsi! Jadi saya baru saja menambahkan panggilan clearTimeout tepat sebelum setTimeout jika typingTimer diatur. Lihat di bawah:

//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 Saya ingin menambahkan ini sebagai komentar untuk jawaban Surreal Dream tapi saya pengguna baru dan tidak memiliki reputasi yang cukup. Maaf!

Memodifikasi jawaban yang diterima untuk menangani kasus tambahan seperti tempel:

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

Saya tidak berpikir acara keyDown diperlukan dalam kasus ini (tolong katakan padaku mengapa jika saya salah). Dalam skrip saya (non-jquery) solusi yang serupa terlihat seperti itu:

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

}

Ini balasan pertama saya di Stack Overflow, jadi saya harap ini membantu seseorang, suatu hari nanti :)

Nyatakan delayfungsi berikut :

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

dan kemudian menggunakannya:

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

Jawaban yang terlambat tetapi saya menambahkannya karena ini tahun 2019 dan ini sepenuhnya dapat dicapai dengan menggunakan ES6 yang cantik, tidak ada perpustakaan pihak ketiga, dan saya menemukan sebagian besar jawaban berperingkat sangat besar dan terbebani dengan terlalu banyak variabel.

Solusi elegan diambil dari posting blog yang luar biasa ini.

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

Yah, sebenarnya tidak, karena komputer tidak dapat menebak kapan pengguna selesai mengetik. Anda tentu saja dapat mengaktifkan timer pada tombol atas, dan mengatur ulang pada setiap tombol berikutnya ke atas. Jika penghitung waktu kedaluwarsa, pengguna belum mengetik untuk jangka waktu - Anda bisa menyebutnya "selesai mengetik".

Jika Anda mengharapkan pengguna membuat jeda saat mengetik, tidak ada cara untuk mengetahui kapan mereka selesai.

(Kecuali tentu saja Anda dapat mengetahui dari data ketika mereka selesai)

Saya merasa solusinya sedikit lebih sederhana dengan inputacara ini:

var typingTimer;
var doneTypingInterval = 500;

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

function doneTyping () {
    // code here
}

setuju dengan jawaban @ going. Solusi serupa lainnya yang berhasil bagi saya adalah solusi di bawah ini. Satu-satunya perbedaan adalah bahwa saya menggunakan .on ("input" ...) alih-alih keyup. Ini hanya menangkap perubahan pada input. tombol lain seperti Ctrl, Shift dll diabaikan

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

Saya baru saja menemukan kode sederhana untuk menunggu pengguna selesai mengetik:

langkah 1.set time out ke null lalu hapus timeout saat ini saat pengguna mengetik.

langkah 2.trigger timeout yang jelas ke variabel define sebelum peristiwa keyup dipicu.

langkah 3. tentukan batas waktu untuk variabel yang dinyatakan di atas;

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

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

Saya sedang menerapkan pencarian di daftar saya dan membutuhkannya untuk berbasis ajax. Itu berarti bahwa pada setiap perubahan kunci, hasil yang dicari harus diperbarui dan ditampilkan. Ini menghasilkan begitu banyak panggilan ajax yang dikirim ke server, yang bukan hal yang baik.

Setelah beberapa bekerja, saya membuat pendekatan untuk melakukan ping ke server ketika pengguna berhenti mengetik.

Solusi ini bekerja untuk saya:

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

Anda akan melihat bahwa tidak perlu menggunakan timer saat menerapkan ini.

Ini adalah kode JS sederhana yang saya tulis:

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

Anda dapat menggunakan acara onblur untuk mendeteksi ketika kotak teks kehilangan fokus: https://developer.mozilla.org/en/DOM/element.onblur

Itu tidak sama dengan "berhenti mengetik", jika Anda peduli tentang kasus di mana pengguna mengetik banyak barang dan kemudian duduk di sana dengan kotak teks masih fokus.

Untuk itu saya akan menyarankan untuk mengikat setTimeout ke acara onclick, dan dengan asumsi bahwa setelah x jumlah waktu tanpa penekanan tombol, pengguna telah berhenti mengetik.

Mengapa tidak menggunakan fokus saja?

https://www.w3schools.com/jsreF/event_onfocusout.asp

Jika itu bentuk, mereka akan selalu meninggalkan fokus setiap bidang input untuk mengklik tombol kirim sehingga Anda tahu tidak ada input yang akan ketinggalan untuk mendapatkan penangan event onfocusout yang dipanggil.

Jika ada keharusan bagi pengguna untuk menjauh dari bidang, kita dapat menggunakan "onBlur" alih-alih Onchange dalam Javascript

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

Jika itu tidak diperlukan, pengaturan timer akan menjadi pilihan yang baik.

Setelah Anda mendeteksi fokus pada kotak teks, pada tombol lakukan pemeriksaan batas waktu, dan reset setiap kali itu dipicu.

Ketika batas waktu selesai, lakukan permintaan ajax Anda.

Jika Anda mencari panjang tertentu (seperti bidang kode pos):

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

Tidak yakin apakah kebutuhan saya agak aneh, tetapi saya membutuhkan sesuatu yang mirip dengan ini dan inilah yang akhirnya saya gunakan:

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

Yang memungkinkan saya untuk memiliki elemen seperti ini di aplikasi saya:

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

Yang diperbarui ketika pengguna "selesai mengetik" (tidak ada tindakan selama 2 detik) atau pergi ke bidang lain (kabur dari elemen)

Jika Anda perlu menunggu sampai pengguna selesai mengetik, gunakan ini:

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

Contoh lengkap dengan panggilan ajax - ini berfungsi untuk pager saya - jumlah item per daftar:

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

Banyak penghitung waktu per halaman

Semua jawaban lain hanya berfungsi untuk satu kontrol ( termasuk jawaban saya yang lain ). Jika Anda memiliki beberapa kontrol per halaman (misalnya dalam keranjang belanja) hanya kontrol terakhir tempat pengguna mengetik sesuatu yang akan dipanggil . Dalam kasus saya ini tentu bukan perilaku yang diinginkan - setiap kontrol harus memiliki timer sendiri.

Untuk mengatasi ini, Anda hanya perlu memberikan ID ke fungsi dan mempertahankan kamus timeoutHandles seperti dalam kode berikut:

Deklarasi Fungsi:

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

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

Penggunaan fungsi:

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

Sederhana dan mudah dimengerti.

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

Untuk melewatkan parameter ke fungsi Anda bersama dengan sintaks ES6.

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

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

Wow, bahkan 3 komentar cukup benar!

1. Input kosong bukan alasan untuk melewatkan panggilan fungsi, misalnya saya menghapus parameter limbah dari url sebelum dialihkan

2. .on ('input', function() { ... });harus digunakan untuk memicu keyup, pastedan changeacara

3. pasti .val()atau .valueharus digunakan

4. Anda dapat menggunakan $(this)fungsi acara di dalam alih-alih #idbekerja dengan beberapa input

5. (keputusan saya) saya menggunakan fungsi anonim bukannya doneTypingdi setTimeoutmudah akses $(this)dari n.4, tetapi Anda harus menyimpannya terlebih dahulu sepertivar $currentInput = $(this);

EDIT Saya melihat bahwa beberapa orang tidak mengerti arah tanpa kemungkinan untuk menyalin-rekatkan kode siap. Di sini kamu

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