Kullanıcı yazmayı bırakana kadar .keyup () işleyicisini nasıl erteleyebilirim?

Bir arama alanım var. Şu anda her tuşlamayı arar. Birisi “Windows” yazarsa, her tuş için AJAX ile arama yapacaktır: “W”, “Wi”, “Win”, “Wind”, “Windo”, “Window”, “Windows”.

Bir gecikme yapmak istiyorum, bu yüzden sadece kullanıcı 200 ms yazmayı bıraktığında arar.

İşlevde bunun için bir seçenek yok keyupve denedim setTimeout, ama işe yaramadı.

Bunu nasıl yapabilirim?

Bu küçük işlevi aynı amaç için kullanıyorum, kullanıcı belirli bir süre için yazmayı durdurduktan sonra veya yüksek hızda tetiklenen olaylarda bir işlevi yürütüyor 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>

Nasıl çalışır:

delayBirden infazlar bu kez daha geçmeden oluşursa fonksiyon içten zamanlayıcı sağlanan saat gecikme ile yeniden her yürütmede, bireysel bir zamanlayıcı işleyen bir sarılmış işlev döndürecek, zamanlayıcı sadece sıfırlamak ve yeniden başlayacaktır.

Zamanlayıcı nihayet sona erdiğinde, orijinal bağlamı ve bağımsız değişkenleri (bu örnekte, jQuery'nin olay nesnesi ve DOM öğesi olarak this) geçirerek geri arama işlevi yürütülür .

GÜNCELLEME 2019-05-16

Modern ortamlar için ES5 ve ES6 özelliklerini kullanarak işlevi yeniden uyguladım:

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

Uygulama bir dizi test ile kapsanmaktadır .

Daha sofistike bir şey için jQuery Typewatch eklentisine bir göz atın .

Tür tamamlandıktan sonra aramak istiyorsanız, setTimoutçağrınızdan döndürülen zaman aşımını tutmak için genel bir değişken kullanın clearTimeoutve son keyupolay dışında zaman aşımını tetiklememesi için henüz gerçekleşmediyse bunu iptal edin.

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

Veya anonim bir işlevle:

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

    //ajax code

  }, 200);  
}   

CMS'nin cevabı üzerinde bir başka hafif gelişme. Ayrı gecikmelere kolayca izin vermek için aşağıdakileri kullanabilirsiniz:

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

Aynı gecikmeyi tekrar kullanmak istiyorsanız,

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

Ayrı gecikmeler istiyorsanız,

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

Debounce gibi yardımcı yöntemler sağlayan underscore.js dosyasına da bakabilirsiniz :

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

CMS'nin cevabına dayanarak bunu yaptım:

Aşağıdaki kodu jQuery'yi ekledikten sonra koyun:

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

Ve sadece şöyle kullanın:

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

Dikkat: parametre olarak iletilen fonksiyondaki $ (this) değişkeni girişle eşleşmiyor

Etiketleri Kullanarak Çok İşlevli Çağrıları Geciktirme

Birlikte çalıştığım çözüm bu. İstediğiniz HERHANGİ bir işlevde yürütmeyi geciktirir . Tuş takımı arama sorgusu olabilir, belki önceki veya sonraki düğmelere hızlı tıklama (aksi takdirde sürekli olarak hızlı bir şekilde tıklandığında birden fazla istek gönderir ve sonuçta kullanılmaz). Bu, her yürütme süresini depolayan ve bunu en güncel istekle karşılaştıran genel bir nesne kullanır.

Böylece sonuç, yalnızca son tıklama / eylemin gerçekten çağrılmasıdır, çünkü bu istekler bir kuyrukta depolanır, X etiketli saniye sonra aynı etikete sahip başka bir istek yoksa kuyrukta çağrılır!

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

Kendi gecikme sürenizi ayarlayabilirsiniz (isteğe bağlı, varsayılan değer 500 ms'dir). Ve işlev argümanlarınızı "kapanış tarzında" gönderin.

Örneğin, feryat işlevini çağırmak istiyorsanız:

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

Birden fazla send_ajax isteğini önlemek için, bunları kullanarak geciktirirsiniz :

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

"Kontrol tarihi" etiketini kullanan her istek, yalnızca 600 milisaniye zaman diliminde başka bir istek yapılmazsa tetiklenir. Bu argüman isteğe bağlıdır

Etiket bağımsızlığı (aynı hedef işlev çağrılır) ancak her ikisini de çalıştırın:

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

Aynı işlevi çağırmakla sonuçlanır, ancak etiketleri farklı olduğu için bağımsız olarak geciktirir

Birisi aynı işlevi ertelemek istiyorsa ve harici değişken olmadan bir sonraki komut dosyasını kullanabilir:

function MyFunction() {

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

        //Execute the function code here...

    }, 500);
}

Kullanıcı bir metin alanına yazmayı bitirdikten sonra bir işlevi çalıştırmak için tasarlanmış süper basit yaklaşım ...

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

Bu işlev, öğeyi geri almak için işlevi Gaten'in cevabından biraz genişletir:

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

Kimse CMS çok güzel snip birden fazla girdi ile sorun bahsetmiyorum şaşırdım.

Temel olarak, her giriş için gecikme değişkenini ayrı ayrı tanımlamanız gerekir. Sb ilk girişine metni koymak ve hızlı bir şekilde diğer girişine atlamak ve yazmaya başlayın Aksi takdirde, ilki için geri arama OLMAYACAKTIR çağrılabilir!

Diğer cevaplara dayanarak birlikte geldiğim aşağıdaki koda bakın:

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

Bu çözüm, setTimeout referansını girişin delayTimer değişkeninde tutar. Ayrıca fazzyx önerdiği gibi eleman referansını geri çağırmaya geçirir.

IE6, 8 (comp - 7), 8 ve Opera 12.11'de test edilmiştir.

Bu, arama mantığı işlemini geciktirdiğim ve değerin metin alanına girilen değerle aynı olup olmadığını kontrol ettiğim için benim için çalıştı. Değer aynı ise, devam edip arama değeriyle ilgili veriler için işlemi gerçekleştiririm.

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

Her bir tuşlamayı çağırmak için gecikme fonksiyonu. jQuery 1.7.1 veya üstü gerekir

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

Kullanımı: $('#searchBox').keyupDelay( cb );

Bu, CMS'lerin çizgileri boyunca bir çözümdür, ancak benim için birkaç önemli sorunu çözüyor:

• Birden fazla girişi destekler, gecikmeler aynı anda çalışabilir.
• Değeri değiştirmeyen önemli olayları yok sayar (Ctrl, Alt + Tab gibi).
• Bir yarış koşulunu çözer (geri arama yürütüldüğünde ve değer zaten değiştiğinde).

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

Kullanımı:

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

Kod hoşlandığım bir tarzda yazılmış, bir demet noktalı virgül eklemeniz gerekebilir.

Akılda tutulması gerekenler:

• Form kimliği ve giriş adı temel alınarak benzersiz bir kimlik oluşturulur, bu nedenle bunların tanımlanması ve benzersiz olması gerekir; aksi takdirde bunu durumunuza göre ayarlayabilirsiniz.
• delay , kendi ihtiyaçlarınız için kolayca genişletilebilen bir nesne döndürür.
• Gecikme için kullanılan orijinal öğe geri aramaya bağlıdır, this beklendiği gibi çalışır (örnekte olduğu gibi).
• İkinci değerlemede boş değer yoksayılır.
• Dikkat enqueue , ben bu tercih, ama Maça parametrelerini geçmek isteyebilirsiniz, ilk milisaniye bekler setTimeout.

Kullandığım çözüm, örneğin yürütmeyi iptal etmenize izin veren başka bir karmaşıklık düzeyi ekliyor, ancak bu üzerine inşa etmek için iyi bir temel.

CMS cevabını Miguel'in cevabı ile birleştirmek, eşzamanlı gecikmelere izin veren sağlam bir çözüm sunar.

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

Farklı eylemleri bağımsız olarak ertelemeniz gerektiğinde, üçüncü argümanı kullanın.

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

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

CMS'nin cevabına dayanarak, kullanımında 'bunu' koruyan yeni gecikme yöntemi:

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

Kullanımı:

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

kullanım

mytimeout = setTimeout( expression, timeout );

Burada ifade, çalıştırılacak komut dosyasıdır ve zaman aşımı, çalıştırmadan önce milisaniye cinsinden bekleme süresidir - bu, komut dosyasını engellemez, ancak zaman aşımı bitene kadar bu parçanın yürütülmesini geciktirir.

clearTimeout(mytimeout);

henüz yürütülmediği sürece ifadede (iptal gibi) çalıştırılmaması için zaman aşımını sıfırlar / temizler.

CMS'nin cevabına dayanarak, sadece değeri değiştirmeyen önemli olayları yok sayar.

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


})

BindWithDelay jQuery eklentisini kullanın :

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

İşte, formunuzdaki çoklu girişlerle ilgilenen yazdığım bir öneri.

Bu işlev, giriş alanının Nesnesini kodunuza alır

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

} // fieldKeyup

Bu gerçek delayCall fonksiyonudur, çoklu giriş alanlarına bakar

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

Kullanımı:

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

Gönderen ES6 , birini kullanabilirsiniz fonksiyon sözdizimi ok sıra.

Bu örnekte, keyupkullanıcılar sorgulama yapmadan önce yazmayı bitirdikten sonra 400ms için kod gecikme olayı searchFuncyapar.

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

Saf Javascript:

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

Otomatik tamamlama eklentisine bir göz atın . Bir gecikme veya minimum karakter sayısı belirtmenize izin verdiğini biliyorum. Eklentiyi kullanmasanız bile, kodu incelemek size nasıl uygulayacağınız konusunda bazı fikirler verecektir.

Eh, ben de Keyup / Keydown neden limit yüksek frekanslı ajax isteği için kod parçası yaptı. Şuna bir bak:

https://github.com/raincious/jQueue

Sorgunuzu şu şekilde yapın:

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.

Ve olayı şöyle bağlayın:

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

Bunu bugün biraz geç gördüm, ancak başka birinin ihtiyaç duyması durumunda buraya koymak istiyorum. sadece yeniden kullanılabilir hale getirmek için işlevi ayırın. Aşağıdaki kod, yazmayı durdurduktan sonra 1/2 saniye bekleyecektir.

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

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

Kullanıcı lodash javascript kütüphanesi ve _.debounce işlevini kullanın

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