জাভাস্ক্রিপ্ট ফাংশন চালান যখন ব্যবহারকারী কী আপের পরিবর্তে টাইপিং শেষ করে?

Question

যখন ব্যবহারকারী কোনও পাঠ্য বাক্সে টাইপ করা শেষ করেন আমি একটি এজাক্স অনুরোধটি ট্রিগার করতে চাই। আমি চাই না যে প্রতিবার কোনও চিঠি লেখার সময় এটি ফাংশনটি চালিত হোক কারণ এর ফলে প্রচুর অ্যাজ্যাক্স অনুরোধ হবে, তবে আমি চাই না যে তারা প্রবেশের বোতামটি চাপুক।

কোনও উপায় আছে যাতে আমি সনাক্ত করতে পারি যখন ব্যবহারকারী টাইপিং শেষ করে এবং তারপরে এজাক্স অনুরোধটি করে?

এখানে jQuery ব্যবহার! ডেভ

Comments

আমি মনে করি আমাদের জন্য আপনাকে "ফিনিস টাইপিং" সংজ্ঞায়িত করতে হবে।

— পরাবাস্তব স্বপ্নগুলি

@ সুর্যাল ড্রিমস এর উত্তর আপনার প্রয়োজনীয়তাগুলির বেশিরভাগটিকে সন্তুষ্ট করে, ব্যবহারকারী যদি নির্দিষ্ট সময়সীমা শেষে আবার টাইপ শুরু করে, একাধিক অনুরোধগুলি সার্ভারে প্রেরণ করা হবে। নীচে আমার উত্তরটি দেখুন যা প্রতিটি এক্সএইচআর অনুরোধটি একটি ভেরিয়েবলে সঞ্চয় করে এবং কোনও নতুনকে গুলি চালানোর আগে তা বাতিল করে দেয়। গুগল তাদের তাত্ক্ষণিক অনুসন্ধানে আসলে এটি করে ।

— মার্কো

jquery কীআপ বিলম্বের

— CMS

অস্পষ্টতা সম্পর্কে কি? আমার অনুমান যে ইনপুট উপাদান ফোকাস হারিয়ে ফেললে ব্যবহারকারী অবশ্যই টাইপিং শেষ করেছেন।

— ডন পি

একটি সাধারণ গুগল অনুসন্ধান আপনাকে সহজ উত্তরটি পেতে পারত: schier.co/blog/2014/12/08/…

— কান্টাইসাইড

Answer 1

সুতরাং, আমি ফিনিস টাইপিং অনুমান করতে যাচ্ছি মানে আপনি কেবল কিছুক্ষণের জন্য থামবেন, 5 সেকেন্ড বলুন। সুতরাং এটি মাথায় রেখে, ব্যবহারকারী একটি চাবি প্রকাশ করার সময় একটি টাইমার শুরু করতে দেয় এবং যখন তারা একটি চাপ দেয় তখন তা সাফ করে দেয়। আমি সিদ্ধান্ত নিয়েছি ইনপুটটি হবে # আমার ইনপুট।

কয়েকটি অনুমান করা ...

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

Comments

ধন্যবাদ :) আমি প্রশ্নটিতে আমার মন্তব্য লিখতে শুরু করেছিলাম এবং বুঝতে পেরেছিলাম যে আমার একটি শালীন ধারণা রয়েছে।

— পরাবাস্তব স্বপ্নগুলি

এই উত্তরটি সঠিকভাবে কাজ করে না, ব্যবহারকারী খুব ধীরে ধীরে টাইপ না করে এটি সর্বদা 5 সেকেন্ড পরে চালিত হবে। নীচে কাজের সমাধান দেখুন।

— যাচ্ছে

আপনি যদি এখানে সমস্যায় পড়ে যান, কারণ টাইমারটি তত্ক্ষণাত্ জ্বলতে থাকে তবে ফাংশন কলটির চারপাশে উদ্ধৃতিগুলি যুক্ত করার চেষ্টা করুন: সেটটাইমআউট ('ফাংশনটোবেকল্যান্ড', ডাই টাইপিংইন্টারওয়াল);

— লার্গো

আমি কয়েকটি মন্তব্য দেখছি যেখানে doneTypingউদাহরণস্বরূপ, কলব্যাক ফাংশনটি অবিলম্বে চলছে running এটি সাধারণত ()ফাংশনটির নাম সহ দুর্ঘটনাক্রমে একটি ফলাফল । মনে রাখবেন এটি পড়তে হবে setTimeout(doneTyping,নাsetTimeout(doneTyping(),

— অ্যান্টনি ডি সান্টি

@ জেসিকা পেস্ট নিয়ে কাজ করতে আপনাকে এই জাতীয় 'পেস্ট' ইভেন্ট যুক্ত করতে হবে: অন ('কীপ পেস্ট',

— সের্গেই

Answer 2

উপরের নির্বাচিত উত্তরটি কাজ করে না।

কারণ টাইপিং টাইমারটি একাধিকবার সেট করা হয় (কীডাউন দ্রুত টাইপার ইত্যাদির জন্য ট্রিগার হওয়ার আগে দুবার কীপ চাপ দেওয়া হয়) তবে এটি সঠিকভাবে পরিষ্কার হয় না।

নীচের সমাধানটি এই সমস্যার সমাধান করে এবং ওপি এর অনুরোধটি শেষ হওয়ার পরে এক্স সেকেন্ড কল করবে। এটির জন্য এখন আর রিডানডেন্ট কীডাউন ফাংশনের প্রয়োজন নেই। আমি একটি চেকও যুক্ত করেছি যাতে আপনার ইনপুটটি খালি থাকলে আপনার ফাংশন কলটি না ঘটে।

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

এবং ভ্যানিলা জাভাস্ক্রিপ্ট সমাধানে একই কোড:

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

এই সমাধানটি ES6 ব্যবহার করে তবে এটি এখানে প্রয়োজনীয় নয়। শুধু প্রতিস্থাপন letসঙ্গে varনিয়মিত ফাংশন তীর ফাংশন এবং।

Comments

আচ্ছা, ইনপুটটি খালি থাকলেও এখনও ফাংশনটি কল করা কার্যকর হবে। আপনি যদি কিছু অনুসন্ধান ফলাফল সাফ করতে চান (উদাহরণস্বরূপ) যখন ইনপুটটি আবার ফাঁকা থাকে?

— rvighne

আমি মনে করি আমাদের সেই শর্তটিও বিবেচনা করা উচিত যেখানে ব্যবহারকারী কেবল ক্ষেত্রের অভ্যন্তরে স্ট্রিং আসে।

— বিশাল নায়ার

$('#myInput').on('input', function() {আপনি যদি এটি অনুলিপি এবং পেস্ট দিয়ে কাজ করতে চান তা ব্যবহার করুন । ইনপুট খালি কিনা তা আমি চেকের বিন্দুটি দেখতে পাচ্ছি না। মনে করুন যে তিনি যা টাইপ করেছেন তা মুছতে চান তিনি আজাক্স কল করতে ব্যর্থ হবেন।

— বিলেণোহ

এর if ($('#myInput').val)পরিবর্তে কেন if ($('#myInput').val())? উচিত .valএকটি ফাংশন হবে?

— wlnirvana

$ (এটি) .ভাল () ব্যবহার করবেন না কেন?

— জোয়েলফ্যান

Answer 3

এটি আন্ডারস্কোর.জেএস ডিবিউন ফাংশন সহ কেবল একটি লাইন :

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

এটি মূলত doSomething বলে thing টাইপ করা বন্ধ করার পরে 500 মিলিসেকেন্ডে ।

আরও তথ্যের জন্য: http://underscorejs.org/#debounce

Comments

JQuery এর জন্যও উপলব্ধ বলে মনে হচ্ছে: কোড. google.com/p/jquery-debounce এবং github.com/diaspora/jquery-debounce

— কোপ্পোর

এটি আমাকে অবাক করে দেয় যে কীভাবে লোকেরা "ওয়ান লাইন অফ কোড" সমালোচনা গুরুত্বপূর্ণ t গ্রেট। কোডের এক লাইনের জন্য লোড করার জন্য 1.1k জেএস ফাইল দরকার। আমি এটিকে হ্রাস পাচ্ছি না কারণ এটি একটি সমাধান। তবে এক লাইন গা bold় জিনিসটি আমাকে তুষ্ট করার পাশাপাশি ব্লাট কোডের দিকে পরিচালিত করে।

— ওল্ফি 20'16

@Wolfie, আমি কোড ফোলানো সম্পর্কে আপনার সাথে একমত কিন্তু আন্ডারস্কোর এবং Lodash দুটোতে নির্ভরশীল-আপন ইউটিলিটি হয় NPM তাই এই অনেক মানুষের জন্য একটি এক লাইন সমাধান করা যেতে পারে।

— পল 20

@ পল আমি সম্মত হই যে আপনি যদি অন্য উদ্দেশ্যে লাইব্রেরিগুলি লোড করে থাকেন তবে সাধারণ কোড ব্যবহার করা এটির সূক্ষ্ম এবং প্রকৃত পক্ষে উপকারী। তবে এক লাইনের উদ্দেশ্যে কোনও কে-কোডের উপর লোড করা কার্যকর নয়। বিশেষত মোবাইল প্ল্যাটফর্মগুলি কম এবং সীমাহীন ডেটা হয়ে যায়। এবং অনেক ইউরো অঞ্চলও ডেটা দিয়ে ইন্টারনেটের জন্য অর্থ প্রদান করে। সুতরাং এটি যুক্তিসঙ্গত যখন ফোটাতে মনোযোগ দেওয়া ভাল।

— ওল্ফি

কেন আমি পেয়েছি:Uncaught ReferenceError: _ is not defined

— উইল্ফ

Answer 4

হ্যাঁ, আপনি প্রতিটি কী ইভেন্টে 2 সেকেন্ডের সময়সীমা নির্ধারণ করতে পারেন যা একটি এজ্যাক্স অনুরোধকে অগ্রাহ্য করবে। আপনি এক্সএইচআর পদ্ধতিটি সঞ্চয় করতে পারেন এবং পরবর্তী কী ইভেন্টগুলিতে এটি বাতিল করতে পারেন যাতে আপনি আরও বেশি ব্যান্ডউইথ সংরক্ষণ করতে পারেন। আমার কিছু স্ব-পরিপূর্ণ স্ক্রিপ্টের জন্য আমি এখানে লিখেছি।

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

আশাকরি এটা সাহায্য করবে,

মার্কো

Comments

আমি এটার সুপারিশ করতাম না। কোড ট্রিগার একটি API অনুরোধ প্রতিটি সময় একটি কী চাপা হয়। তারপরে এটি অন্য কী চাপলে অনুরোধটি বাতিল করে দেয়। যদিও এই সমাধানটি ব্যবহারকারীদের টাইপ করার সময় এজাক্স কলব্যাকটি ট্রিগার হতে বাধা দেয়, তবুও এটি অনুরোধ সহ সার্ভারকে হাতুড়ি করবে।

— lxg

Ixg, না এটি হবে না। তিনি যে ক্লিয়ারটাইমআউট ফাংশনটি ব্যবহার করেন তা পূর্ববর্তী টাইমআউট ইভেন্টগুলি সাফ করে, এরপরে এপিআই কলটি শুরু করে।

— জন স্মিথ

@ জনস্মিত, আমি প্রথমে টাইমার সাফ করা ভাল বলে মনে করি না, তবে এক্সএইচআর ফাঁকা আছে কিনা তা যাচাই করুন এবং আপনার শর্ত যা কিছু হতে পারে এবং শেষ পর্যন্ত

— অজ্যাক্স

Answer 5

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

এখানে সম্পূর্ণ উদাহরণ: http://jsfiddle.net/ZYXp4/8/

Comments

এটি আমার পক্ষে কাজ করেছে, তবে মনে রাখবেন যে ব্যবহারকারী যখন পাঠ্য বাক্সের ট্যাব আউট করে আপনি কোনও কীআপ ইভেন্ট পাবেন না কারণ এটি যে বিন্দুতে ফোকাস হারিয়েছে। পরিবর্তে কীডাউনে সেট করা সমস্যার সমাধান বলে মনে হচ্ছে।

— horatius83

Answer 6

উভয় শীর্ষ 2 উত্তর আমার পক্ষে কাজ করে না। সুতরাং, এখানে আমার সমাধান:

var timeout = null;

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

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

Answer 7

আমি সেরিয়াল ড্রিমের উত্তরটি পছন্দ করি তবে আমি দেখতে পেয়েছি যে আমার "ডুডটাইপিং" ফাংশনটি প্রতিটি কিপ্রেসের জন্য আগুন লাগবে, অর্থাত্ যদি আপনি সত্যিই "হ্যালো" টাইপ করেন; আপনি যখন টাইপিং বন্ধ করবেন ঠিক তখনই গুলি চালানোর পরিবর্তে, ফাংশনটি 5 বার চালিত হবে।

সমস্যাটি ছিল জাভাস্ক্রিপ্ট সেটটাইমআউট ফাংশনটি সেট করা পুরানো টাইমআউটগুলি ওভাররাইট করতে বা হত্যা করতে দেখা যাচ্ছে না, তবে আপনি নিজে যদি এটি করেন তবে এটি কার্যকর হয়! তাই আমি টাইপটাইমার সেট করা থাকলে সেটটাইমআউটের ঠিক আগে ক্লিয়ারটাইমআউট কল যুক্ত করেছি। নিচে দেখ:

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

এনবি আমি কেবল পরাবাস্তব স্বপ্নের উত্তরের মন্তব্য হিসাবে এটি যুক্ত করতে চাইতাম তবে আমি একজন নতুন ব্যবহারকারী এবং এর যথেষ্ট খ্যাতি নেই। দুঃখিত!

Answer 8

পেস্টের মতো অতিরিক্ত কেসগুলি হ্যান্ডেল করার জন্য গৃহীত উত্তরটি পরিবর্তন করা:

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

Answer 9

এই ক্ষেত্রে কীডাউন ইভেন্টটি প্রয়োজনীয় বলে আমি মনে করি না (কেন আমি ভুল হলে দয়া করে আমাকে বলুন)। আমার (নন-জ্যাকোয়ারি) স্ক্রিপ্টে অনুরূপ সমাধানটি দেখতে দেখতে এমন দেখাচ্ছে:

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

}

স্ট্যাক ওভারফ্লোতে এটি আমার প্রথম জবাব, তাই আমি আশা করি এটি কোনওদিন কোনও ব্যক্তিকে সহায়তা করবে :)

Answer 10

নিম্নলিখিত delayফাংশনটি ঘোষণা করুন :

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

এবং তারপরে এটি ব্যবহার করুন:

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

Comments

আপনার সমাধান চমত্কার, ভাই!

— বিকাশকারী

@ ডেভলপার অনেক ধন্যবাদ আমি আরও জটিল জটিল পরিস্থিতি সমাধানের জন্য আরও একটি উত্তর যুক্ত করেছি (প্রতি পৃষ্ঠায় একাধিক নিয়ন্ত্রণ)।

— ফ্যাবিয়ান বিগলারের

ভাল সমাধান। আমি এটি ব্যবহার করছি তবে কীডাউন আইএম এর পরিবর্তে 'ইনপুট' ইভেন্টটি ব্যবহার করছি

— বুডিন

কীআপ ইভেন্ট সহ, এটি আমার পক্ষে দুর্দান্ত কাজ করেছে। ধন্যবাদ।

— সিনান এলডেম

Answer 11

দেরী উত্তর কিন্তু আমি এটিকে যুক্ত করছি কারণ এটি 2019 এবং এটি তৃতীয় পক্ষের কোনও লাইব্রেরি নয়, বেশ সুন্দর ES6 ব্যবহার করে সম্পূর্ণরূপে অর্জনযোগ্য এবং আমি দেখতে পাই যে বেশিরভাগ উচ্চতর রেটযুক্ত উত্তরগুলি ভারী এবং অনেকগুলি ভেরিয়েবলের সাথে ওজন করা যায়।

এই দুর্দান্ত ব্লগ পোস্ট থেকে নেওয়া মার্জিত সমাধান ।

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

Comments

এই বছরটি দেওয়া সত্যই শীর্ষ উত্তর হতে হবে

— ডার্ক হিপ্পো

Answer 12

ঠিক আছে, কঠোরভাবে না বলুন, কারণ ব্যবহারকারী কখন টাইপিং শেষ করেছেন তা কম্পিউটার অনুমান করতে পারে না। আপনি অবশ্যই কী আপটিতে একটি টাইমার ফায়ার করতে পারেন এবং এটি পরবর্তী প্রতিটি কী আপকে পুনরায় সেট করতে পারেন। যদি টাইমারটির মেয়াদ শেষ হয়, ব্যবহারকারী টাইমার সময়কালের জন্য টাইপ করেনি - আপনি এই "সমাপ্ত টাইপিং" বলতে পারেন।

আপনি যদি টাইপ করার সময় ব্যবহারকারীরা বিরতি দেওয়ার প্রত্যাশা করেন, কখন হয়ে যায় তা জানার কোনও উপায় নেই।

(অবশ্যই তা না হলে আপনি তথ্য থেকে তা বলতে পারবেন)

Answer 13

আমি মনে করি সমাধানটি inputইভেন্টটির সাথে কিছুটা সহজ ler

var typingTimer;
var doneTypingInterval = 500;

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

function doneTyping () {
    // code here
}

Answer 14

@ যাওয়ার উত্তরের সাথে একমত আমার জন্য অনুরূপ আর একটি সমাধান হ'ল নীচের একটি। পার্থক্যটি হ'ল আমি কীআপের পরিবর্তে .on ("ইনপুট" ...) ব্যবহার করছি। এটি কেবল ইনপুটটিতে পরিবর্তনগুলি ক্যাপচার করে। অন্যান্য কী যেমন সিটিআরএল, শিফট ইত্যাদি উপেক্ষা করা হয়

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

Answer 15

ব্যবহারকারীর টাইপিং শেষ হওয়ার জন্য অপেক্ষা করার জন্য আমি একটি সাধারণ কোড বেরিয়েছি:

পদক্ষেপে 1. সেট সময় শেষ হয়ে যাবে এবং ব্যবহারকারী টাইপ করার সময় বর্তমান সময়সীমা সাফ করুন।

পদক্ষেপ ২.আর কি-আপ ইভেন্টটি ট্রিগার হওয়ার আগে ভেরিয়েবলের নির্ধারিত সময়সীমা নির্ধারণ করুন।

পদক্ষেপ 3. উপরের ভেরিয়েবলের নির্দিষ্ট সময়সীমা;

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

জাভাস্ক্রিপ্ট কোড

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

Comments

প্রশ্নের ইতিমধ্যে উত্তর দেওয়া হয়েছে ... এবং এটি এর সাথে বেশ মিল

— মিক্সোন

Answer 16

আমি আমার তালিকাসমূহে অনুসন্ধানটি বাস্তবায়ন করছিলাম এবং এজাক্স ভিত্তিক হওয়া দরকার। এর অর্থ হ'ল প্রতিটি মূল পরিবর্তনে অনুসন্ধানের ফলাফলগুলি আপডেট করে প্রদর্শন করা উচিত। এর ফলে সার্ভারে প্রেরিত অনেক আজাক্স কল এসেছে যা কোনও ভাল জিনিস নয়।

কিছুক্ষণ কাজ করার পরে, যখন ব্যবহারকারী টাইপ করা বন্ধ করে দেয় তখন আমি সার্ভারটি পিং করার জন্য একটি পদ্ধতি তৈরি করেছি।

এই সমাধানটি আমার পক্ষে কাজ করেছে:

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

আপনি লক্ষ্য করবেন যে এটি প্রয়োগ করার সময় কোনও টাইমার ব্যবহার করার দরকার নেই।

Answer 17

এটি আমি লিখেছি একটি সাধারণ জেএস কোড:

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

Answer 18

পাঠ্যবক্সটি ফোকাস হারিয়ে ফেললে আপনি সনাক্ত করতে অনাবলুর ইভেন্টটি ব্যবহার করতে পারেন: https://developer.mozilla.org/en/DOM/element.onblur

এটি "টাইপিং বন্ধ করে দেয়" এর মতো নয়, যদি আপনি এমন কেসটি সম্পর্কে যত্নশীল হন যেখানে ব্যবহারকারী অনেকগুলি স্টাফ টাইপ করে এবং সেখানে এখনও পাঠ্যবাক্সকে কেন্দ্রীভূত করে বসে থাকে।

তার জন্য আমি অনক্লিক ইভেন্টে একটি সেটটাইমআউট বাঁধার পরামর্শ দিচ্ছি এবং ধরে নিচ্ছি যে এক্স-পরিমাণ সময়ের পরে কোনও কীস্ট্রোক না দিয়ে ব্যবহারকারী টাইপ করা বন্ধ করে দিয়েছেন।

Answer 19

কেন শুধু অনফোকসআউট ব্যবহার করবেন না?

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

যদি এটি কোনও ফর্ম হয় তবে সাবমিট বোতামটি ক্লিক করতে তারা সর্বদা প্রতিটি ইনপুট ফিল্ডের ফোকাস ছেড়ে দেবে যাতে আপনি জানেন যে কোনও ইনপুট তার অনফোকসআউট ইভেন্ট হ্যান্ডলারটি কল করতে ব্যর্থ হবে।

Comments

প্রশ্নটি জিজ্ঞাসা করা হলে (প্রায় 7 বছর আগে) অনফোকসআউটটির দুর্বল সমর্থন ছিল এবং অনফোকসআউটটির প্রভাবটি কিছুটা আলাদা হবে। ব্যবহারকারীর উপাদানটির উপর ফোকাস ছেড়ে যাওয়ার জন্য আপনাকে অপেক্ষা করতে হবে, যদিও সময়সীমা / ডেবিউন সমাধানের সাথে সাথে ব্যবহারকারী "টাইপিং" বন্ধ করে দেয় এবং ব্যবহারকারীকে ফোকাস পরিবর্তন করতে হবে না। ব্যবহারের ক্ষেত্রে উদাহরণগুলি সেই রেজিস্ট্রেশন ফর্মগুলির মধ্যে একটি হবে যেখানে ব্যবহারকারী কোনও সম্ভাব্য ব্যবহারকারীর নাম প্রবেশ করানো বন্ধ করে দেয় যখন নামটি উপস্থিত রয়েছে তা নির্দেশ করে ফর্মের ক্ষেত্রের ডানদিকে "এক্স" উপস্থিত হবে।

— ডেভিড জোরিচটা

যদি সার্চ বারটি ফোকাসে থাকে, কারও বাইরে আসতে হবে না, কিছু সময়ের পরে ফলাফল সরাসরি প্রদর্শিত হবে কারণ কোনও খোলার আর কোনও টাইপ হচ্ছে না

— পি সতীশ প্যাট্রো

Answer 20

যদি ব্যবহারকারীটি ক্ষেত্র থেকে সরে যাওয়ার জন্য প্রয়োজনীয়তা থাকে তবে আমরা জাভাস্ক্রিপ্টে অনচেঞ্জের পরিবর্তে "onBlur" ব্যবহার করতে পারি

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

যদি এটি প্রয়োজনীয় না হয় তবে টাইমার নির্ধারণ করা ভাল বিকল্প হবে।

Answer 21

একবার আপনি পাঠ্য বাক্সটিতে ফোকাস শনাক্ত করার পরে, কী-তে একটি টাইমআউট পরীক্ষা করে নিন এবং প্রতিবার ট্রিগার হওয়ার সাথে সাথে এটি পুনরায় সেট করুন।

সময়সীমা শেষ হয়ে গেলে, আপনার অজ্যাক্স অনুরোধটি করুন।

Answer 22

যদি আপনি একটি নির্দিষ্ট দৈর্ঘ্য (যেমন একটি পিনকোড ক্ষেত্র) খুঁজছেন:

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

Comments

এজ্যাক্স অনুরোধ প্রেরণের আগে সীমিত বৈধতা অর্জন করা খারাপ ধারণা নয়।

— চিম

Answer 23

আমার চাহিদাগুলি কেবল এক ধরণের অদ্ভুত কিনা তা নিশ্চিত নই, তবে এর সাথে আমারও অনুরূপ কিছু দরকার ছিল এবং এটি আমি ব্যবহার করে শেষ করেছি:

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

যা আমাকে আমার অ্যাপ্লিকেশনটিতে এই জাতীয় উপাদান থাকতে দেয়:

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

ব্যবহারকারী "টাইপিং" সম্পন্ন করার পরে আপডেট হয় (2 সেকেন্ডের জন্য কোনও পদক্ষেপ নেই) বা অন্য ক্ষেত্রে যায় (উপাদানটি বাদ দেয়)

Answer 24

আপনার যদি টাইপিং শেষ না হওয়া পর্যন্ত অপেক্ষা করতে হয় তবে এটি ব্যবহার সহজ:

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

এজাক্স কল সহ সম্পূর্ণ উদাহরণ - এটি আমার পেজারের জন্য কাজ করছে - তালিকা অনুসারে আইটেমের সংখ্যা:

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

Answer 25

প্রতি পৃষ্ঠায় একাধিক টাইমার

অন্যান্য সমস্ত উত্তর কেবল একটি নিয়ন্ত্রণের জন্য কাজ করে ( আমার অন্যান্য উত্তর অন্তর্ভুক্ত)। যদি আপনার প্রতি পৃষ্ঠায় একাধিক নিয়ন্ত্রণ থাকে (যেমন শপিং কার্টে) কেবলমাত্র সর্বশেষ নিয়ন্ত্রণ যেখানে ব্যবহারকারী টাইপ করা কিছু কল করতে পারে । আমার ক্ষেত্রে এটি অবশ্যই পছন্দসই আচরণ নয় - প্রতিটি নিয়ন্ত্রণের নিজস্ব টাইমার থাকা উচিত।

এটি সমাধানের জন্য, আপনাকে কেবল ফাংশনটিতে একটি আইডি পাস করতে হবে এবং নিম্নলিখিত কোডের মতো একটি সময়সীমা হ্যান্ডলস অভিধান বজায় রাখতে হবে:

কার্য ঘোষণা:

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

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

ফাংশন ব্যবহার:

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

Answer 26

সহজ এবং বুঝতে সহজ।

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

Answer 27

ES6 সিনট্যাক্স সহ আপনার ফাংশনে পরামিতিগুলি পাস করার জন্য।

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

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

Answer 28

বাহ, এমনকি 3 মন্তব্যও বেশ সঠিক!

1. খালি ইনপুট ফাংশন কল এড়িয়ে যাওয়ার কোনও কারণ নয়, যেমন আমি পুনর্নির্দেশের আগে ইউআরএল থেকে বর্জ্য পরামিতিগুলি সরিয়ে ফেলি

2. .on ('input', function() { ... });ট্রিগার ব্যবহার করা উচিত keyup, pasteএবং changeঘটনা

3. অবশ্যই .val()বা .valueব্যবহার করা আবশ্যক

4. আপনি একাধিক ইনপুটগুলির সাথে কাজ করার $(this)পরিবর্তে ইভেন্ট ফাংশনের অভ্যন্তরে ব্যবহার করতে পারেন#id

5. (আমার সিদ্ধান্ত) আমি পরিবর্তে বেনামী ফাংশন ব্যবহার doneTypingমধ্যে setTimeoutসহজে অ্যাক্সেস করার জন্য $(this)n.4 থেকে, কিন্তু আপনি প্রথম মত সংরক্ষণ করতে হবেvar $currentInput = $(this);

সম্পাদনা করুন আমি দেখতে পাচ্ছি যে কিছু লোক প্রস্তুত কোডটি অনুলিপি করার সম্ভাবনা ছাড়াই দিকনির্দেশগুলি বুঝতে পারে না। এখানে আপনি

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

Comments

কিভাবে এই প্রশ্নের উত্তর?

— থমাস অরলিতা

@ থমাস অরলিটা এই উত্তরটি 3 সবচেয়ে রেটযুক্ত উত্তর পরিপূরক করে। 1. এটা সমর্থন করে না: গৃহীত এক কটাক্ষপাত paste, এটা ব্যবহার করে না this, ইত্যাদি (আমি মনে করি এটা গুরুত্বপূর্ণ কিন্তু আমি মন্তব্য টন মধ্যে হারিয়ে না চান)

— vladkras

এটি প্রশ্নের উত্তর দেয় না। আপনি যদি অন্য একটি উত্তর সম্পর্কে মন্তব্য করতে চান তবে একটি মন্তব্য করার ব্যবস্থা রয়েছে (আমি এখনই এটি ব্যবহার করছি!)

— গ্রেডফক্স