সেটটাইমআউট / ক্লিয়ারটাইমআউট সমস্যা


106

আমি উদাহরণস্বরূপ স্টার্টপেজে যাওয়ার জন্য একটি পৃষ্ঠা তৈরি করার চেষ্টা করি। নিষ্ক্রিয়তার 10 সেকেন্ড (ব্যবহারকারী কোথাও ক্লিক করছে না)। আমি বাকীগুলির জন্য jQuery ব্যবহার করি তবে আমার পরীক্ষার ফাংশনে সেট / ক্লিয়ারটি খাঁটি জাভাস্ক্রিপ্ট।

আমার হতাশায় আমি এই ফাংশনটির মতো এমন কিছু নিয়ে শেষ করেছিলাম যা আমি আশা করি যে আমি পৃষ্ঠায় যে কোনও ক্লিকে কল করতে পারি। টাইমারটি সূক্ষ্ম শুরু হয়, তবে একটি ক্লিকে পুনরায় সেট করা হয় না। প্রথম 10 সেকেন্ডের মধ্যে যদি ফাংশনটি 5 বার বলা হয়, তবে 5 সতর্কতাগুলি উপস্থিত হবে ... ক্লিয়ারটাইমআউট হবে না ...

function endAndStartTimer() {
    window.clearTimeout(timer);
    var timer;
    //var millisecBeforeRedirect = 10000; 
    timer = window.setTimeout(function(){alert('Hello!');},10000); 
}

যে কেউ কোডের কিছু লাইন পেয়েছে যে কৌশলটি করবে? - যে কোনও ক্লিপ স্টপে রিসেট করুন এবং টাইমারটি শুরু করুন। - যখন টাইমার হিট যেমন। 10 সেকেন্ড কিছু করুন।

উত্তর:


229

আপনাকে ফাংশনের timer বাইরে ঘোষণা করতে হবে। অন্যথায়, আপনি প্রতিটি ফাংশন অনুরোধে একটি নতুন ভেরিয়েবল পাবেন।

var timer;
function endAndStartTimer() {
  window.clearTimeout(timer);
  //var millisecBeforeRedirect = 10000; 
  timer = window.setTimeout(function(){alert('Hello!');},10000); 
}

প্লাস 1 কারণ এটি প্রয়োজনীয়, এক্ষেত্রে, সময়কে আউট করার আগে সময়টিকে হুড করে দেয় এমন পরিবর্তনশীলটি সাফ করার জন্য, যাতে এটি দু'বার আহ্বান করা এড়িয়ে চলেন
ডিয়েগো ফ্যাভারো

46

সমস্যাটি হ'ল timerভেরিয়েবলটি স্থানীয় এবং প্রতিটি ফাংশন কল করার পরে এর মানটি নষ্ট হয়ে যায়।

আপনার এটিকে অব্যাহত রাখতে হবে, আপনি এটি ফাংশনের বাইরে রাখতে পারেন, বা আপনি যদি পরিবর্তনশীলটিকে বিশ্বব্যাপী হিসাবে প্রকাশ করতে না চান তবে আপনি এটি একটি ক্লোজারে সংরক্ষণ করতে পারেন , যেমন:

var endAndStartTimer = (function () {
  var timer; // variable persisted here
  return function () {
    window.clearTimeout(timer);
    //var millisecBeforeRedirect = 10000; 
    timer = window.setTimeout(function(){alert('Hello!');},10000); 
  };
})();

15

এটি কারণ টাইমার আপনার ফাংশনের স্থানীয় পরিবর্তনশীল।

এটি ফাংশনের বাইরে তৈরি করার চেষ্টা করুন।


7

প্রতিক্রিয়া হিসাবে এটি ব্যবহার করার একটি উপায়:

class Timeout extends Component {
  constructor(props){
    super(props)

    this.state = {
      timeout: null
    }

  }

  userTimeout(){
    const { timeout } = this.state;
    clearTimeout(timeout);
    this.setState({
      timeout: setTimeout(() => {this.callAPI()}, 250)
    })

  }
}

ব্যবহারকারী উদাহরণস্বরূপ টাইপ করা বন্ধ করার পরে আপনি যদি কেবলমাত্র একটি API কল করতে চান তবে সহায়ক ful ইউজারটাইমআউট ফাংশনটি একটি ইনপুটে অন কী-আপের মাধ্যমে আবদ্ধ হতে পারে।


4
ধন্যবাদ, কয়েক ঘন্টা ধরে আমি এটি খুঁজছিলাম। আমি কেবল ভাবছিলাম যে এই ধরণের ফলাফলের জন্য আরও ভাল উপায় আছে?
নিকাসভ

4
@nikasv রোধ, এবং debouncing দুটি বিকল্প আছে: medium.com/@_jh3y/...
zero_cool

2

নিশ্চিত না যে এটি কিছু ভাল অনুশীলন কোডিংয়ের নিয়ম লঙ্ঘন করেছে তবে আমি সাধারণত এইটি নিয়ে আসি:

if(typeof __t == 'undefined')
        __t = 0;
clearTimeout(__t);
__t = setTimeout(callback, 1000);

এটি ফাংশনটির বাইরে টাইমার ঘোষণার প্রয়োজনীয়তা রোধ করে।

সম্পাদনা: এটি প্রতিটি অনুরোধে একটি নতুন ভেরিয়েবল ঘোষণা করবেন না, তবে সর্বদা একই পুনর্ব্যবহার করুন।

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


0

এটি ভাল কাজ করে। এটি হ'ল ইভেন্টগুলি পরিচালনা করার জন্য আমি একজন পরিচালক। ইভেন্টগুলি হোল্ড করার জন্য রয়েছে এবং আপনি কখন ছেড়ে দেবেন।

function onUserHold(element, func, hold, clearfunc) {
    //var holdTime = 0;
    var holdTimeout;

    element.addEventListener('mousedown', function(e) {
        holdTimeout = setTimeout(function() {
            func();
            clearTimeout(holdTimeout);
            holdTime = 0;
        }, hold);
        //alert('UU');
    });

    element.addEventListener('mouseup', clearTime);
    element.addEventListener('mouseout', clearTime);

    function clearTime() {
        clearTimeout(holdTimeout);
        holdTime = 0;
        if(clearfunc) {
            clearfunc();
        }
    }
}

এলিমেন্ট প্যারামিটারটি হ'ল এটি আপনার ধারণ করে। প্যারামিটার হোল্ড দ্বারা নির্দিষ্ট কয়েকটি মিলিসেকেন্ডের জন্য ধরে রাখলে ফান প্যারামিটারটি জ্বলে ওঠে। ক্লিয়ারফঙ্ক প্যারাম alচ্ছিক এবং যদি এটি দেওয়া হয় তবে এটি ব্যবহারকারীর কাছে যেতে বা উপাদান ছাড়তে দিলে তা বরখাস্ত হয়ে যাবে। আপনি যে বৈশিষ্ট্যগুলি চান সেগুলি পেতে আপনি কিছু পরিশ্রমও করতে পারেন। উপভোগ করুন! :)


0

ব্যবহারিক উদাহরণ ড্রপডাউন মেনুর জন্য জ্যাকুরি ব্যবহার করে! মাউসের উপর # আইকনলগডিনউক্সে এক্সটার্নাল শো ডিভ # এক্সটার্নালমেনু লোগিন এবং ডিভকে আড়াল করার জন্য সময় নির্ধারণ করুন # বহিরাগতমেনু লোগিন

ডিভ # এক্সটার্নালমেনু লোগিনে মাউস অন এটি সময়সীমা বাতিল করে। ডিভ # এক্সটার্নালমেনু লোগিনে মাউস আউট হওয়ার সময়সীমা নির্ধারণ করে।

এখানে বিন্দুটি সর্বদা সময়সীমা নির্ধারণের আগে ক্লিয়ারটাইমআউট শুরু করা, যেমন ডাবল কল এড়িয়ে চলা

var ExternalMenuLoginTO;
$('#IconLoggedinUxExternal').on('mouseover mouseenter', function () {

    clearTimeout( ExternalMenuLoginTO )
    $("#ExternalMenuLogin").show()
});

$('#IconLoggedinUxExternal').on('mouseleave mouseout', function () {

    clearTimeout( ExternalMenuLoginTO )    
    ExternalMenuLoginTO = setTimeout(
        function () {

            $("#ExternalMenuLogin").hide()

        }
        ,1000
    );
    $("#ExternalMenuLogin").show()
});

$('#ExternalMenuLogin').on('mouseover mouseenter', function () {

    clearTimeout( ExternalMenuLoginTO )
});
$('#ExternalMenuLogin').on('mouseleave mouseout', function () {

    clearTimeout( ExternalMenuLoginTO )
    ExternalMenuLoginTO = setTimeout(
        function () {

            $("#ExternalMenuLogin").hide()

        }
        ,500
    );
});
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.