ฉันจะเรียก 3 ฟังก์ชั่นเพื่อดำเนินการหนึ่งฟังก์ชั่นได้อย่างไร?

ถ้าฉันต้องการเรียกฟังก์ชั่นนี้ทีละอัน

$('#art1').animate({'width':'1000px'},1000);        
$('#art2').animate({'width':'1000px'},1000);        
$('#art3').animate({'width':'1000px'},1000);        

ฉันรู้ใน jQuery ฉันสามารถทำสิ่งที่ชอบ:

$('#art1').animate({'width':'1000px'},1000,'linear',function(){
    $('#art2').animate({'width':'1000px'},1000,'linear',function(){
        $('#art3').animate({'width':'1000px'},1000);        
    });        
});        

แต่สมมติว่าฉันไม่ได้ใช้ jQuery และฉันต้องการโทร:

some_3secs_function(some_value);        
some_5secs_function(some_value);        
some_8secs_function(some_value);        

ฉันควรจะเรียกใช้ฟังก์ชันนี้เพื่อดำเนินการsome_3secs_functionอย่างไรและหลังจากที่การโทรสิ้นสุดลงแล้วดำเนินการsome_5secs_functionและหลังการโทรสิ้นสุดลงแล้วโทรsome_8secs_function?

UPDATE:

สิ่งนี้ยังไม่ทำงาน:

(function(callback){
    $('#art1').animate({'width':'1000px'},1000);
    callback();
})((function(callback2){
    $('#art2').animate({'width':'1000px'},1000);
    callback2();
})(function(){
    $('#art3').animate({'width':'1000px'},1000);
}));

ภาพเคลื่อนไหวสามภาพเริ่มต้นในเวลาเดียวกัน

ความผิดพลาดของฉันอยู่ที่ไหน

ใน Javascript มีซิงโครและไม่ตรงกันฟังก์ชั่น

ฟังก์ชั่นซิงโครนัส

ฟังก์ชั่นส่วนใหญ่ใน Javascript เป็นแบบซิงโครนัส ถ้าคุณจะเรียกฟังก์ชั่นซิงโครนัสหลาย ๆ อันในแถว

doSomething();
doSomethingElse();
doSomethingUsefulThisTime();

พวกเขาจะดำเนินการตามลำดับ doSomethingElseจะไม่เริ่มจนกว่าจะdoSomethingเสร็จสมบูรณ์ doSomethingUsefulThisTimeในที่สุดก็จะไม่เริ่มจนกว่าจะdoSomethingElseเสร็จสมบูรณ์

ฟังก์ชันแบบอะซิงโครนัส

อย่างไรก็ตามฟังก์ชันอะซิงโครนัสจะไม่รอซึ่งกันและกัน ให้เราดูตัวอย่างรหัสเดียวกันกับที่เรามีข้างบนคราวนี้สมมติว่าฟังก์ชั่นเป็นแบบอะซิงโครนัส

doSomething();
doSomethingElse();
doSomethingUsefulThisTime();

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

แต่บางครั้งคุณต้องการฟังก์ชั่นที่ไม่ทำงานเพื่อดำเนินการตามลำดับและบางครั้งคุณต้องการฟังก์ชั่นที่ทำงานแบบซิงโครนัส โชคดีที่สามารถโทรกลับและหมดเวลาได้ตามลำดับ

เรียกกลับ

สมมติว่าเรามีสามฟังก์ชั่นไม่ตรงกันว่าเราต้องการที่จะดำเนินการในการสั่งซื้อsome_3secs_function, และsome_5secs_functionsome_8secs_function

เนื่องจากสามารถส่งผ่านฟังก์ชั่นเป็นอาร์กิวเมนต์ใน Javascript ได้คุณจึงสามารถส่งผ่านฟังก์ชันเป็นการโทรกลับเพื่อเรียกใช้งานหลังจากที่ฟังก์ชันเสร็จ

ถ้าเราสร้างฟังก์ชั่นเช่นนี้

function some_3secs_function(value, callback){
  //do stuff
  callback();
}

จากนั้นคุณสามารถโทรตามลำดับเช่นนี้:

some_3secs_function(some_value, function() {
  some_5secs_function(other_value, function() {
    some_8secs_function(third_value, function() {
      //All three functions have completed, in order.
    });
  });
});

หมดเวลา

ใน Javascript คุณสามารถบอกให้ฟังก์ชั่นดำเนินการหลังจากหมดเวลา (ในหน่วยมิลลิวินาที) สิ่งนี้สามารถทำให้ฟังก์ชั่นซิงโครนัสทำงานแบบอะซิงโครนัสได้

หากเรามีฟังก์ชั่นซิงโครนัสสามตัวเราสามารถเรียกใช้setTimeoutฟังก์ชันแบบอะซิงโครนัสได้โดยใช้ฟังก์ชัน

setTimeout(doSomething, 10);
setTimeout(doSomethingElse, 10);
setTimeout(doSomethingUsefulThisTime, 10);

นี้เป็นอย่างไรบิตน่าเกลียดและละเมิดหลักการแห้ง [วิกิพีเดีย] เราสามารถล้างข้อมูลได้โดยการสร้างฟังก์ชั่นที่ยอมรับฟังก์ชั่นและการหมดเวลา

function executeAsynchronously(functions, timeout) {
  for(var i = 0; i < functions.length; i++) {
    setTimeout(functions[i], timeout);
  }
}

สามารถเรียกได้ว่าเป็นเช่นนี้:

executeAsynchronously(
    [doSomething, doSomethingElse, doSomethingUsefulThisTime], 10);

โดยสรุปหากคุณมีฟังก์ชั่นแบบอะซิงโครนัสที่คุณต้องการเรียกใช้แบบซิงโครนัสให้ใช้การโทรกลับและหากคุณมีฟังก์ชั่นซิงโครนัสที่คุณต้องการเรียกใช้แบบอะซิงโครนัส

คำตอบนี้ใช้promisesคุณสมบัติ JavaScript ของECMAScript 6มาตรฐาน หากแพลตฟอร์มเป้าหมายของคุณไม่สนับสนุนpromises, Polyfill กับPromiseJs

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

นี่คือสิ่งที่รหัสของคุณจะมีลักษณะเช่นเดียวกับและES6 PromisesjQuery animations

Promise.resolve($('#art1').animate({ 'width': '1000px' }, 1000).promise()).then(function(){
    return Promise.resolve($('#art2').animate({ 'width': '1000px' }, 1000).promise());
}).then(function(){
    return Promise.resolve($('#art3').animate({ 'width': '1000px' }, 1000).promise());
});

Promisesวิธีการปกตินอกจากนี้ยังสามารถห่อใน

new Promise(function(fulfill, reject){
    //do something for 5 seconds
    fulfill(result);
}).then(function(result){
    return new Promise(function(fulfill, reject){
        //do something for 5 seconds
        fulfill(result);
    });
}).then(function(result){
    return new Promise(function(fulfill, reject){
        //do something for 8 seconds
        fulfill(result);
    });
}).then(function(result){
    //do something with the result
});

thenวิธีการที่จะดำเนินการทันทีที่Promiseเสร็จสิ้นแล้ว โดยปกติแล้วค่าส่งคืนของการfunctionส่งผ่านไปยังจะthenถูกส่งผ่านไปยังผลลัพธ์ถัดไป

แต่ถ้า a Promiseถูกส่งคืนthenฟังก์ชันถัดไปจะรอจนกระทั่งการPromiseดำเนินการเสร็จสิ้นและรับผลลัพธ์ของมัน (ค่าที่ส่งผ่านไปfulfill)

ดูเหมือนคุณกำลังแข็งตัวไม่เต็มที่ความแตกต่างระหว่างซิงโครและไม่ตรงกันดำเนินฟังก์ชั่น

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

1. ทำขั้นตอนในภาพเคลื่อนไหว
2. โทรsetTimeoutด้วยฟังก์ชั่นที่มีขั้นตอนแอนิเมชั่นถัดไปและการหน่วงเวลา
3. บางเวลาผ่านไป
4. การเรียกกลับที่กำหนดให้setTimeoutดำเนินการ
5. กลับไปที่ขั้นตอนที่ 1

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

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

ในกรณีที่ง่ายที่สุดนี่จะเทียบเท่ากับสิ่งต่อไปนี้:

window.setTimeout(function() {
    alert("!");
    // set another timeout once the first completes
    window.setTimeout(function() {
        alert("!!");
    }, 1000);
}, 3000); // longer, but first

นี่คือฟังก์ชันวนลูปแบบอะซิงโครนัสทั่วไป มันจะเรียกฟังก์ชั่นที่กำหนดตามลำดับรอจำนวนวินาทีที่ระบุระหว่างแต่ละ

function loop() {
    var args = arguments;
    if (args.length <= 0)
        return;
    (function chain(i) {
        if (i >= args.length || typeof args[i] !== 'function')
            return;
        window.setTimeout(function() {
            args[i]();
            chain(i + 1);
        }, 2000);
    })(0);
}    

การใช้งาน:

loop(
  function() { alert("sam"); }, 
  function() { alert("sue"); });

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

ฉันเชื่อว่า ไลบรารีasyncจะช่วยให้คุณทำสิ่งนี้ได้อย่างสวยงาม ในขณะที่คำมั่นสัญญาและการเรียกกลับอาจทำให้ยากต่อการเล่น แต่ async สามารถสร้างรูปแบบที่ประณีตเพื่อปรับปรุงกระบวนการคิดของคุณ เมื่อต้องการเรียกใช้ฟังก์ชั่นในอนุกรมคุณจะต้องใส่ไว้ใน async น้ำตก ใน async lingo ทุกฟังก์ชั่นถูกเรียกว่า a taskที่รับอาร์กิวเมนต์และ a callback; ซึ่งเป็นฟังก์ชั่นต่อไปในลำดับ โครงสร้างพื้นฐานจะมีลักษณะดังนี้:

async.waterfall([
  // A list of functions
  function(callback){
      // Function no. 1 in sequence
      callback(null, arg);
  },
  function(arg, callback){
      // Function no. 2 in sequence
      callback(null);
  }
],    
function(err, results){
   // Optional final callback will get results for all prior functions
});

ฉันพยายามอธิบายโครงสร้างสั้น ๆ ที่นี่ อ่านคู่มือน้ำตกสำหรับข้อมูลเพิ่มเติมมันเขียนค่อนข้างดี

ฟังก์ชั่นของคุณควรใช้ฟังก์ชั่นการโทรกลับที่ได้รับการเรียกเมื่อมันเสร็จสิ้น

function fone(callback){
...do something...
callback.apply(this,[]);

}

function ftwo(callback){
...do something...
callback.apply(this,[]);
}

การใช้งานจะเป็นเช่น:

fone(function(){
  ftwo(function(){
   ..ftwo done...
  })
});

asec=1000; 

setTimeout('some_3secs_function("somevalue")',asec*3);
setTimeout('some_5secs_function("somevalue")',asec*5);
setTimeout('some_8secs_function("somevalue")',asec*8);

ฉันจะไม่พูดถึง setTimeout อย่างลึกซึ้งที่นี่ แต่:

• ในกรณีนี้ฉันได้เพิ่มรหัสเพื่อดำเนินการเป็นสตริง นี่เป็นวิธีที่ง่ายที่สุดในการส่งผ่าน var ในฟังก์ชั่น setTimeout-ed ของคุณ แต่นักสอนจะบ่น
• คุณยังสามารถส่งชื่อฟังก์ชันโดยไม่มีเครื่องหมายอัญประกาศ แต่ไม่สามารถส่งผ่านตัวแปรได้
• รหัสของคุณไม่รอให้ setTimeout ทำการทริกเกอร์
• สิ่งนี้อาจเป็นเรื่องยากที่จะทำให้หัวของคุณไปรอบ ๆ ในตอนแรก: เพราะจากจุดก่อนหน้านี้ถ้าคุณผ่านตัวแปรจากฟังก์ชั่นการโทรของคุณตัวแปรนั้นจะไม่อยู่อีกต่อไปเมื่อถึงเวลาที่หมดเวลา - ฟังก์ชั่นการโทรจะทำงาน vars หายไป
• ฉันได้รับการรู้จักในการใช้ฟังก์ชั่นที่ไม่ระบุชื่อเพื่อหลีกเลี่ยงสิ่งเหล่านี้ แต่อาจมีวิธีที่ดีกว่า

เมื่อคุณติดแท็กด้วย javascript ฉันจะใช้ตัวควบคุมตัวจับเวลาเนื่องจากชื่อฟังก์ชันของคุณคือ 3, 5 และ 8 วินาที ดังนั้นเริ่มจับเวลาของคุณ 3 วินาทีในการโทรครั้งแรก 5 วินาทีในการโทรที่สอง 8 วินาทีในการโทรที่สามจากนั้นเมื่อเสร็จแล้วหยุดจับเวลา

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

คุณสามารถใช้สัญญาในลักษณะนี้:

    some_3secs_function(this.some_value).then(function(){
       some_5secs_function(this.some_other_value).then(function(){
          some_8secs_function(this.some_other_other_value);
       });
    });

คุณจะต้องทำให้เป็นsome_valueสากลเพื่อให้สามารถเข้าถึงได้จากภายในจากนั้น

อีกทางหนึ่งจากฟังก์ชั่นด้านนอกคุณสามารถคืนค่าฟังก์ชั่นด้านในจะใช้เช่น:

    one(some_value).then(function(return_of_one){
       two(return_of_one).then(function(return_of_two){
          three(return_of_two);
       });
    });

ฉันใช้ฟังก์ชั่น 'waitUntil' ตาม setTimeout ของจาวาสคริปต์

/*
    funcCond : function to call to check whether a condition is true
    readyAction : function to call when the condition was true
    checkInterval : interval to poll <optional>
    timeout : timeout until the setTimeout should stop polling (not 100% accurate. It was accurate enough for my code, but if you need exact milliseconds, please refrain from using Date <optional>
    timeoutfunc : function to call on timeout <optional>
*/
function waitUntil(funcCond, readyAction, checkInterval, timeout, timeoutfunc) {
    if (checkInterval == null) {
        checkInterval = 100; // checkinterval of 100ms by default
    }
    var start = +new Date(); // use the + to convert it to a number immediatly
    if (timeout == null) {
        timeout = Number.POSITIVE_INFINITY; // no timeout by default
    }
    var checkFunc = function() {
        var end = +new Date(); // rough timeout estimations by default

        if (end-start > timeout) {
            if (timeoutfunc){ // if timeout function was defined
                timeoutfunc(); // call timeout function
            }
        } else {
            if(funcCond()) { // if condition was met
                readyAction(); // perform ready action function
            } else {
                setTimeout(checkFunc, checkInterval); // else re-iterate
            }
        }
    };
    checkFunc(); // start check function initially
};

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

เช่น

doSomething();
waitUntil(function() { return doSomething_value===1;}, doSomethingElse);
waitUntil(function() { return doSomethingElse_value===1;}, doSomethingUseful);

หมายเหตุ

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

หากต้องดำเนินการตามวิธีที่ 1 หลังจากวิธีที่ 2, 3, 4 ข้อมูลโค้ดต่อไปนี้สามารถเป็นวิธีการแก้ปัญหานี้ได้โดยใช้วัตถุที่เลื่อนออกไปใน JavaScript

function method1(){
  var dfd = new $.Deferred();
     setTimeout(function(){
     console.log("Inside Method - 1"); 
     method2(dfd);	 
    }, 5000);
  return dfd.promise();
}

function method2(dfd){
  setTimeout(function(){
   console.log("Inside Method - 2"); 
   method3(dfd);	
  }, 3000);
}

function method3(dfd){
  setTimeout(function(){
   console.log("Inside Method - 3"); 	
   dfd.resolve();
  }, 3000);
}

function method4(){   
   console.log("Inside Method - 4"); 	
}

var call = method1();

$.when(call).then(function(cb){
  method4();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>