เรียกใช้งานสคริปต์หลังจากการหน่วงเวลาโดยใช้ JavaScript

มีวิธีการ JavaScript ใด ๆ ที่คล้ายกับ jQuery delay()หรือwait()(เพื่อชะลอการเรียกใช้สคริปต์ตามระยะเวลาที่กำหนด)

มีดังต่อไปนี้:

setTimeout(function, milliseconds);

ฟังก์ชั่นซึ่งสามารถผ่านเวลาหลังจากที่ฟังก์ชั่นจะถูกดำเนินการ

ดู: หน้าต่างsetTimeout()วิธี

เพียงเพิ่มสิ่งที่ทุกคนพูดถึงsetTimeout: หากคุณต้องการเรียกใช้ฟังก์ชันที่มีพารามิเตอร์ในอนาคตคุณต้องตั้งค่าการเรียกใช้ฟังก์ชันที่ไม่ระบุชื่อ

คุณต้องผ่านฟังก์ชั่นเป็นอาร์กิวเมนต์เพื่อให้เรียกใช้ในภายหลัง ในความหมายนี้หมายความว่าไม่มีเครื่องหมายวงเล็บอยู่ด้านหลังชื่อ ต่อไปนี้จะเรียกการแจ้งเตือนทันทีและจะแสดง 'Hello world':

var a = "world";
setTimeout(alert("Hello " + a), 2000);

ในการแก้ไขปัญหานี้คุณสามารถใส่ชื่อฟังก์ชั่น (ตามที่ Flubba ได้ทำไว้) หรือคุณสามารถใช้ฟังก์ชั่นที่ไม่ระบุชื่อก็ได้ หากคุณต้องการส่งผ่านพารามิเตอร์คุณต้องใช้ฟังก์ชันที่ไม่ระบุชื่อ

var a = "world";
setTimeout(function(){alert("Hello " + a)}, 2000);
a = "Stack Overflow";

แต่ถ้าคุณเรียกใช้รหัสนั้นคุณจะสังเกตเห็นว่าหลังจาก 2 วินาทีป๊อปอัพจะพูดว่า 'Hello Stack Overflow' นี่เป็นเพราะค่าของตัวแปร a มีการเปลี่ยนแปลงในสองวินาทีนั้น หากต้องการให้มันพูดว่า 'Hello world' หลังจากสองวินาทีคุณจะต้องใช้ข้อมูลโค้ดต่อไปนี้:

function callback(a){
    return function(){
        alert("Hello " + a);
    }
}
var a = "world";
setTimeout(callback(a), 2000);
a = "Stack Overflow";

จะรอประมาณ 2 วินาทีจากนั้นป๊อปอัป 'Hello world'

เพียงเพื่อขยายเล็กน้อย ... คุณสามารถรันโค้ดโดยตรงในการsetTimeoutโทร แต่เป็น@patrickพูดว่าปกติคุณจะกำหนดฟังก์ชั่นการโทรกลับเช่นนี้ เวลาเป็นมิลลิวินาที

setTimeout(func, 4000);
function func() {
    alert('Do stuff here');
}

หากคุณต้องการให้มีdelayฟังก์ชั่นการปิดกั้น (ซิงโครนัส) (สำหรับทุกสิ่ง) ทำไมคุณไม่ทำสิ่งนี้:

<script type="text/javascript">
    function delay(ms) {
        var cur_d = new Date();
        var cur_ticks = cur_d.getTime();
        var ms_passed = 0;
        while(ms_passed < ms) {
            var d = new Date();  // Possible memory leak?
            var ticks = d.getTime();
            ms_passed = ticks - cur_ticks;
            // d = null;  // Prevent memory leak?
        }
    }

    alert("2 sec delay")
    delay(2000);
    alert("done ... 500 ms delay")
    delay(500);
    alert("done");
</script>

คุณต้องใช้setTimeoutและส่งผ่านฟังก์ชันการโทรกลับ เหตุผลที่คุณไม่สามารถใช้ sleep ใน javascript ได้ก็เพราะคุณปิดกั้นหน้าเว็บทั้งหมดไม่ให้ทำอะไรเลยในระหว่างนี้ ไม่ใช่แผนการที่ดี ใช้รูปแบบกิจกรรมของ Javascript และมีความสุข อย่าสู้กับมัน!

นอกจากนี้คุณยังสามารถใช้window.setInterval ()เพื่อเรียกใช้รหัสซ้ำ ๆ ในช่วงเวลาปกติ

เพื่อเพิ่มความคิดเห็นก่อนหน้านี้ฉันต้องการจะพูดต่อไปนี้:

setTimeout()ฟังก์ชั่นใน JavaScript ไม่ได้หยุดการทำงานของสคริปต์ต่อ se แต่เพียงบอกคอมไพเลอร์ในการดำเนินการบางครั้งรหัสในอนาคต

ไม่มีฟังก์ชั่นที่สามารถหยุดการประมวลผลที่สร้างไว้ใน JavaScript ได้ อย่างไรก็ตามคุณสามารถเขียนฟังก์ชั่นของคุณเองที่ทำบางสิ่งบางอย่างเช่นการวนซ้ำแบบไม่มีเงื่อนไขจนกว่าจะถึงเวลาโดยใช้Date()ฟังก์ชันและเพิ่มช่วงเวลาที่คุณต้องการ

หากคุณต้องการทดสอบความล่าช้าคุณสามารถใช้สิ่งนี้:

function delay(ms) {
   ms += new Date().getTime();
   while (new Date() < ms){}
}

และถ้าคุณต้องการหน่วงเวลา 2 วินาทีคุณจะทำ:

delay(2000);

อาจไม่ดีที่สุดสำหรับการผลิตแม้ว่า เพิ่มเติมเกี่ยวกับที่อยู่ในความคิดเห็น

ทำไมคุณไม่สามารถใส่รหัสตามสัญญา? (พิมพ์ที่ด้านบนของหัวของฉัน)

new Promise(function(resolve, reject) {
  setTimeout(resolve, 2000);
}).then(function() {
  console.log('do whatever you wanted to hold off on');
});

คำตอบง่ายๆคือ:

setTimeout(
    function () {
        x = 1;
    }, 1000);

ฟังก์ชั่นด้านบนรอ 1 วินาที (1,000 ms) จากนั้นตั้งค่า x เป็น 1 เห็นได้ชัดว่านี่เป็นตัวอย่าง; คุณสามารถทำสิ่งที่คุณต้องการในฟังก์ชั่นที่ไม่ระบุชื่อ

ผมชอบ Maurius' คำอธิบาย (การตอบสนอง upvoted สูงสุด) setTimeoutมีสามวิธีที่แตกต่างกันสำหรับการโทร

ในรหัสของฉันฉันต้องการอัตโนมัตินำทางไปยังหน้าก่อนหน้าโดยอัตโนมัติเมื่อเสร็จสิ้นการบันทึกเหตุการณ์ AJAX ความสมบูรณ์ของเหตุการณ์บันทึกมีภาพเคลื่อนไหวเล็กน้อยใน CSS ที่ระบุว่าบันทึกสำเร็จ

ในรหัสของฉันฉันพบความแตกต่างระหว่างสองตัวอย่างแรก:

setTimeout(window.history.back(), 3000);

อันนี้ไม่รอการหมดเวลา - back () ถูกเรียกเกือบจะทันทีไม่ว่าฉันจะใส่เบอร์ไหนสำหรับความล่าช้า

อย่างไรก็ตามการเปลี่ยนสิ่งนี้เป็น:

setTimeout(function() {window.history.back()}, 3000);

สิ่งนี้ทำในสิ่งที่ฉันหวังอย่างแน่นอน

นี้ไม่ได้เป็นเฉพาะกับการดำเนินงานกลับ () alert()เดียวกันที่เกิดขึ้นกับ โดยพื้นฐานแล้วจะalert()ใช้ในกรณีแรกเวลาล่าช้าจะถูกละเว้น เมื่อฉันปิดป๊อปอัพภาพเคลื่อนไหวสำหรับ CSS จะดำเนินต่อไป

ดังนั้นฉันขอแนะนำวิธีที่สองหรือสามที่เขาอธิบายแม้ว่าคุณจะใช้ฟังก์ชันที่มีอยู่แล้วและไม่ใช้อาร์กิวเมนต์

ฉันมีคำสั่ง ajax ที่ฉันต้องการเรียกใช้โดยมีความล่าช้าในระหว่างนั้น นี่คือตัวอย่างง่ายๆของวิธีหนึ่งในการทำเช่นนั้น ฉันพร้อมที่จะถูกฉีกเป็นชิ้นเล็กชิ้นน้อย แต่สำหรับวิธีการที่แปลกใหม่ของฉัน :)

//  Show current seconds and milliseconds
//  (I know there are other ways, I was aiming for minimal code
//  and fixed width.)
function secs()
{
    var s = Date.now() + ""; s = s.substr(s.length - 5);
  return s.substr(0, 2) + "." + s.substr(2);
}

//  Log we're loading
console.log("Loading: " + secs());

//  Create a list of commands to execute
var cmds = 
[
    function() { console.log("A: " + secs()); },
    function() { console.log("B: " + secs()); },
    function() { console.log("C: " + secs()); },
    function() { console.log("D: " + secs()); },
    function() { console.log("E: " + secs()); },
  function() { console.log("done: " + secs()); }
];

//  Run each command with a second delay in between
var ms = 1000;
cmds.forEach(function(cmd, i)
{
    setTimeout(cmd, ms * i);
});

// Log we've loaded (probably logged before first command)
console.log("Loaded: " + secs());

คุณสามารถคัดลอกบล็อครหัสและวางลงในหน้าต่างคอนโซลและดูดังนี้:

Loading: 03.077
Loaded: 03.078
A: 03.079
B: 04.075
C: 05.075
D: 06.075
E: 07.076
done: 08.076

ทางออกที่ง่ายที่สุดในการเรียกใช้ฟังก์ชันของคุณด้วยความล่าช้าคือ:

function executeWithDelay(anotherFunction) {
    setTimeout(anotherFunction, delayInMilliseconds);
}

ฟังก์ชั่นล่าช้า:

/**
 * delay or pause for some time
 * @param {number} t - time (ms)
 * @return {Promise<*>}
 */
const delay = async t => new Promise(resolve => setTimeout(resolve, t));

การใช้งานภายในasyncฟังก์ชั่น:

await delay(1000);

อย่างที่คนอื่นพูดว่า setTimeout เป็นเดิมพันที่ปลอดภัยที่สุดของคุณ
แต่บางครั้งคุณไม่สามารถแยกลอจิกกับฟังก์ชั่นใหม่จากนั้นคุณสามารถใช้ Date.now () เพื่อรับมิลลิวินาทีและทำการหน่วงเวลาด้วยตัวคุณเอง ....

function delay(milisecondDelay) {
   milisecondDelay += Date.now();
   while(Date.now() < milisecondDelay){}
}

alert('Ill be back in 5 sec after you click OK....');
delay(5000);
alert('# Im back # date:' +new Date());