it-swarm.dev

كيفية تعيين تأخير الوقت في جافا سكريبت

لديّ قطعة من js في موقع الويب الخاص بي لتبديل الصور ولكنني بحاجة إلى تأخير عند النقر فوق الصورة مرة أخرى. يجب أن يكون التأخير 1000ms. لذلك ستنقر فوق img.jpg ثم ستظهر img_onclick.jpg. ستنقر بعد ذلك على الصورة img_onclick.jpg يجب أن يكون هناك تأخير قدره 1000 مللي ثانية قبل أن يتم عرض img.jpg مرة أخرى.

هنا هو الكود:

jQuery(document).ready(function($) {

    $(".toggle-container").hide();
    $(".trigger").toggle(function () {
        $(this).addClass("active");
        $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg');
    }, function () {
        $(this).removeClass("active");
        $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
    });
    $(".trigger").click(function () {
        $(this).next(".toggle-container").slideToggle();
    });
});
121
Blue Orange

استخدمsetTimeout():

var delayInMilliseconds = 1000; //1 second

setTimeout(function() {
  //your code to be executed after 1 second
}, delayInMilliseconds);

إذا كنت تريد أن تفعل ذلك دون setTimeout: ارجع إلى هذا السؤال .

289
HIRA THAKUR
setTimeout(function(){


}, 500); 

ضع الكود الخاص بك داخل { }

500 = 0.5 ثانية

2200 = 2.2 ثانية

إلخ.

35
maudulus

هناك نوعان (معظمهما مستخدمان) من وظائف المؤقت في javascript setTimeout و setInterval ( other )

كلتا الطريقتين لها نفس التوقيع. أنها تأخذ وظيفة معاودة الاتصال وتأخير الوقت كمعلمة.

يتم تنفيذ setTimeout مرة واحدة فقط بعد التأخير بينما يظل setInterval على استدعاء وظيفة رد الاتصال بعد كل milisecs تأخير.

كلا الطريقتين تقوم بإرجاع معرف عدد صحيح يمكن استخدامه لمسحها قبل انتهاء صلاحية المؤقت.

كلتا الطريقتين clearTimeout و clearInterval تأخذان معرفًا صحيحًا تم إرجاعه من الدوال أعلاه setTimeout و setInterval

مثال:

setTimeout

alert("before setTimeout");

setTimeout(function(){
        alert("I am setTimeout");
   },1000); //delay is in milliseconds 

  alert("after setTimeout");

إذا قمت بتشغيل الكود أعلاه ، فسترى أنه ينبهbefore setTimeoutثمafter setTimeoutأخيرًا ينبهI am setTimeoutبعد 1 ثانية (1000 مللي ثانية)

ما يمكنك ملاحظته من المثال هو أن setTimeout(...) غير متزامن مما يعني أنه لا ينتظر انقضاء المؤقت قبل الانتقال إلى البيان التالي ، أي alert("after setTimeout");

مثال:

setInterval

alert("before setInterval"); //called first

 var tid = setInterval(function(){
        //called 5 times each time after one second  
      //before getting cleared by below timeout. 
        alert("I am setInterval");
   },1000); //delay is in milliseconds 

  alert("after setInterval"); //called second

setTimeout(function(){
     clearInterval(tid); //clear above interval after 5 seconds
},5000);

إذا قمت بتشغيل الكود أعلاه ، فسترى أنه ينبهbefore setIntervalثمafter setIntervalأخيرًا ينبهI am setInterval5 مرات بعد 1 ثانية (1000 مللي ثانية) لأن setTimeout واضح الموقت بعد 5 ثوانٍ أو آخر كل ثانية ستحصل على تنبيهI am setIntervalبلا حدود.

كيف المتصفح داخليا يفعل ذلك؟

ساوضح باختصار.

لفهم أن عليك أن تعرف عن قائمة انتظار الحدث في جافا سكريبت. هناك قائمة انتظار الحدث تنفيذها في المتصفح. عندما يتم تشغيل حدث ما في ملف js ، تتم إضافة كل هذه الأحداث (مثل النقر وغيرها) إلى قائمة الانتظار هذه. عندما لا يكون لدى المستعرض الخاص بك أي شيء لتنفيذه ، فإنه يأخذ حدثًا من قائمة الانتظار وينفّذه واحدًا تلو الآخر.

الآن ، عندما تقوم بالاتصال بـ setTimeout أو setInterval ، يتم تسجيل رد الاتصال الخاص بك في جهاز ضبط وقت في المتصفح ويتم إضافته إلى قائمة انتظار الأحداث بعد انتهاء الوقت المحدد ثم يأخذ javascript الحدث من قائمة الانتظار وينفذه في النهاية.

يحدث ذلك ، لأن محرك javascript مترابط واحدًا ويمكنه تنفيذ شيء واحد فقط في كل مرة. لذلك ، لا يمكنهم تنفيذ جافا سكريبت آخر وتتبع توقيتك. لهذا السبب يتم تسجيل هذه المؤقتات مع المستعرض (المستعرض غير مترابط فرديًا) ويمكنه تتبع الموقت وإضافة حدث في قائمة الانتظار بعد انتهاء الموقت.

يحدث الشيء نفسه بالنسبة لـ setInterval فقط في هذه الحالة ، تتم إضافة الحدث إلى قائمة الانتظار مرارًا وتكرارًا بعد الفاصل الزمني المحدد حتى يتم مسحه أو تحديث صفحة المستعرض.

ملاحظة

معلمة التأخير التي تمر بها إلى هذه الوظائف هي الحد الأدنى لوقت التأخير لتنفيذ رد الاتصال. هذا لأنه بعد انتهاء المؤقت ، يضيف المستعرض الحدث إلى قائمة الانتظار ليتم تنفيذها بواسطة مشغل javascript ولكن تنفيذ رد الاتصال يعتمد على موضع الأحداث في قائمة الانتظار ولأنه يتم تشغيل محرك واحد سيتم تنفيذ جميع الأحداث في قائمة الانتظار واحدا تلو الآخر.

وبالتالي ، قد يستغرق رد الاتصال في وقت ما أكثر من وقت التأخير المحدد ليتم استدعاؤه بشكل خاص عندما يقوم رمزك الآخر بحظر الخيط وعدم إعطائه وقتًا لمعالجة ما هو موجود في قائمة الانتظار.

وكما ذكرت جافا سكريبت هو موضوع واحد. لذلك ، إذا قمت بحظر الخيط لفترة طويلة.

مثل هذا الرمز

while(true) { //infinite loop 
}

قد يحصل المستخدم الخاص بك على رسالة تفيد الصفحة لا تستجيب .

9
Nadir Laskar

حل ES-6

يوجد أدناه نموذج التعليمات البرمجية الذي يستخدم async/انتظار للحصول على تأخير فعلي.

هناك العديد من القيود وهذا قد لا يكون مفيدًا ، ولكن فقط نشر هنا للتسلية ..

    async function delay(delayInms) {
      return new Promise(resolve  => {
        setTimeout(() => {
          resolve(2);
        }, delayInms);
      });
    }
    async function sample() {
      console.log('a');
      console.log('waiting...')
      let delayres = await delay(3000);
      console.log('b');
    }
    sample();
6
Ninjaneer

للمكالمات المزامنة ، يمكنك استخدام الطريقة أدناه:

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}
0
user1188867

سأقدم مدخلاتي لأنها تساعدني على فهم ما أفعله.

لإجراء عرض شرائح للتمرير التلقائي يتضمن انتظارًا لمدة 3 ثوانٍ ، قمت بما يلي:

var isPlaying = true;

function autoPlay(playing){
   var delayTime = 3000;
   var timeIncrement = 3000;

   if(playing){
        for(var i=0; i<6; i++){//I have 6 images
            setTimeout(nextImage, delayTime);
            delayTime += timeIncrement;
        }
        isPlaying = false;

   }else{
       alert("auto play off");
   }
}

autoPlay(isPlaying);

تذكر أنه عند تنفيذ setTimeout () مثل هذا ؛ سيتم تنفيذ جميع وظائف المهلة كما لو كانت تنفذ في نفس الوقت على افتراض أنه في setTimeout (nextImage ، delayTime) ؛ وقت التأخير هو ثابت 3000 مللي ثانية.

ما فعلته لحساب هذا هو إضافة 3000 مللي/ثانية إضافية بعد كل زيادة حلقة عبر delayTime += timeIncrement;.

بالنسبة لأولئك الذين يهتمون هنا هو ما يبدو لي nextImage ():

function nextImage(){
    if(currentImg === 1){//change to img 2
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[1].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[1];
        imgDescription.innerHTML = imgDescText[1];

        currentImg = 2;
    }
    else if(currentImg === 2){//change to img 3
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[2].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[2];
        imgDescription.innerHTML = imgDescText[2];

        currentImg = 3;
    }
    else if(currentImg === 3){//change to img 4
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[3].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[3];
        imgDescription.innerHTML = imgDescText[3];

        currentImg = 4;
    }
    else if(currentImg === 4){//change to img 5
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[4].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[4];
        imgDescription.innerHTML = imgDescText[4];

        currentImg = 5;
    }
    else if(currentImg === 5){//change to img 6
    for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[5].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[5];
        imgDescription.innerHTML = imgDescText[5];

        currentImg = 6;
    }
    else if(currentImg === 6){//change to img 1
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[0].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[0];
        imgDescription.innerHTML = imgDescText[0];

        currentImg = 1;
    }
}
0
user6090272

إليكم ما أقوم به لحل هذه المشكلة. أوافق على ذلك بسبب مشكلة التوقيت وتحتاج إلى توقف مؤقت لتنفيذ التعليمات البرمجية.

var delayInMilliseconds = 1000; 
setTimeout(function() {
 //add your code here to execute
 }, delayInMilliseconds);

هذا الكود الجديد سيوقفه مؤقتًا لمدة ثانية واحدة وسيعمل على تشغيل الكود.

0
Amir Md Amiruzzaman

إذا كنت بحاجة إلى تحديث ، فهذه إمكانية أخرى:

setTimeout(function () { 
    $("#jsSegurosProductos").jsGrid("refresh"); 
}, 1000);
0
oOJITOSo