執行另一個函式時如何呼叫函式

我是 JavaScript 的完整初學者。我只想在函式 firstOne() 完成執行后呼叫名為 seconONE() 的函式。這么說，我的意思是當 p1 的值為 4 時，函式二將呼叫（在這種情況下）；我可以通過呼叫 setTimeout() 函式來實作它。但是如果我不知道執行 { the first one() } 需要多少次怎么辦？

 // getting DOM element
const p1 = document.getElementById(`one`);
const p2 = document.getElementById(`two`);
const p3 = document.getElementById(`three`);

// first function
function firstOne() {
    for (let i = 0; i < 5; i  ) {
        setTimeout(() => {
            p1.innerHTML = i;
        }, i * 1000);
    }
}

// second function
function seconOne() {
    for (let i = 0; i < 5; i  ) {
        setTimeout(() => {
            p2.innerHTML = i;
        }, i * 1000);
    }
}

uj5u.com熱心網友回復：

一個可能的解決方案是使用promises。更多關于 Promise的資訊在這里。

作業示例

var p1 = 1;
var p2 = 2;
var p3 = 3;

const firstPromise = new Promise((resolve, reject) => {
  for (let i = 0; i < 5; i  ) {
        setTimeout(() => {
            p1 = i;
        }, i * 1000);
    }
  resolve()
 
});

const secondPromise = new Promise((resolve, reject) => {
  for (let i = 0; i < 5; i  ) {
        setTimeout(() => {
            p2 = i;
        }, i * 1000);
    }
    resolve()
});


//run first promise
console.log("First promise called")
firstPromise
  .then((response) => {
    console.log("First promise done")
    
    //run second promise after first promise succeed
    console.log("Second promise called")
    secondPromise
      .then((response) => console.log("Second promise done"))
  })

uj5u.com熱心網友回復：

你的問題一點也不幼稚。您需要了解的是回呼和承諾處理程式。這只是告訴 JavaScript 等到任務完成才能執行下一個任務。

firstOne().then(() => secondOne())

uj5u.com熱心網友回復：

將 if 條件放入您的 firstOne 函式中。

const p1 = document.getElementById(`one`);
const p2 = document.getElementById(`two`);
const p3 = document.getElementById(`three`);

// first function
function firstOne() {
    for (let i = 0; i < 5; i  ) {
        setTimeout(() => {
            if(i == 4){
               seconOne();
            }else{
                p1.innerHTML = i;
            }
        }, i * 1000);
    }
}

// second function
function seconOne() {
    for (let i = 0; i < 5; i  ) {
        setTimeout(() => {
            p2.innerHTML = i;
        }, i * 1000);
    }
}

uj5u.com熱心網友回復：

只是建立在建議使用 Promise的其他答案的基礎上，這里有一個更通用的解決方案，它也使用async/await。

（總而言之：呼叫一個帶有計數和元素的函式。該函式將回傳一個承諾，即“在某個時候”作業將完成。內部函式回圈更新元素內容，直到達到該計數，此時承諾解決了，接下來的事情就可以開始了）。

// Cache the elements
const p1 = document.querySelector('#one');
const p2 = document.querySelector('#two');
const p3 = document.querySelector('#three');

// `timer` accepts a count, and the element
// to apply the count to
function timer(count, el) {

  // Return a promise that basically says:
  // once I'm done doing this work, resolve,
  // and then the event queue can
  // get on with the next thing
  return new Promise(resolve => {

    // So we create a loop that logs the numbers
    // in our element up to the count we specified.
    // and when that number is reached, resolve the promise
    function loop(n = 0) {

      // If our current `n` value is <= count
      if (n <= count) {

        // Set the content of the element
        el.textContent = n;

        // Call `loop` again after a second
        // with an incremented `n` value
        setTimeout(loop, 1000,   n);

      // Otherwise resolve the promise
      } else {
        resolve();
      }

    }

    loop();

  });
}

// And now we just await each resolved promise
async function main() {
  await timer(4, p1);
  await timer(7, p2);
  await timer(20, p3);
  console.log('Done!');
}

main();

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

附加檔案

• 查詢選擇器

標籤：

上一篇：如何使用switch陳述句創建一個函式javascript

下一篇：Python函式不回傳任何內容-TicTacToe