Question

我想依次运行两个函数，以便第一个函数运行，然后第二个函数运行。通常，我可以通过简单地先调用第一个函数并将其结果用于第二个函数来实现

代码如下，codepen在这里

function add_count(i){
  document.body.appendChild(document.createElement('pre')).innerHTML = i
}

function count_three_up(i){
  setTimeout(add_count,1000,i)
  setTimeout(add_count,2000,i+1)
  setTimeout(add_count,3000,i+2)
  return i + 3
}

next_number = count_three_up(1)//first function
count_three_up(next_number)//second function

其结果产生：

1, 4, 3, 5, 3, 6

但是我想生产

 1,2,3,4,5,6

我应该提到，第二个函数使用第一个函数的结果很重要。

Answer 1

您可以添加其他值，因为您有不同的超时时间。

你拥有的是

time   1000  2000  3000
values    1     2     3
          4     5     6

但您需要

time   1000  2000  3000
values    1     3     5
          2     4     6

这意味着，您只需要返回一个增加了一个而不是三个的值。

function add_count(i){
    document.body.appendChild(document.createElement('pre')).innerHTML = i;
}

function count_three_up(i){
    setTimeout(add_count, 1000, i);
    setTimeout(add_count, 2000, i + 2);
    setTimeout(add_count, 3000, i + 4);
    return i + 1;
}

next_number = count_three_up(1);
count_three_up(next_number);

Answer 2

function add_count(i){
    document.body.appendChild(document.createElement('pre')).innerHTML = i
}

function count_three_up(i, callback){
    var iteration = 0;
    var interval = setInterval(function(){
        add_count(i);
        i++;
        iteration++;
        if(iteration === 3) {
            clearInterval(interval);
            if(callback)callback();
        }
    }, 1000);

    return i + 3
}

var next_number = count_three_up(1, function(){
    count_three_up(next_number)
})

Answer 3

您的问题解释为：“我想一一显示连续的数字，每个数字之间要有延迟”。

使用局部方法，并在setTimeout中调用它，只要中间值数组不为空

const result = document.querySelector("#result");
const write = (v, atStart) => result.textContent += `${(atStart ? "" : ",")}${v}`;
const createCounterArray = max => Array.from({length: max}).map( (v, i) => i + 1 );
showConsecutiveNumbersDelayed(createCounterArray(6), 1).write();

function showConsecutiveNumbersDelayed(arr, delay = 0.2) {
  const len = arr.length - 1;
  const doWrite = () => 
    arr.length && setTimeout(doWrite, delay * 1000) && write(arr.shift(), arr.length === len);
  return {write: doWrite};
}

<pre id="result"></pre>

Answer 4

您将超时设置为1000，2000，3000，1000，2000 ...相反，您可能希望使其依赖于i ：

function count_three_up(i){
  setTimeout(add_count, 1000 * i , i)
  setTimeout(add_count, 1000 * (i + 1), i+1)
  setTimeout(add_count, 1000 * (i + 2), i+2)
  return i + 3
}

虽然可行，但用诺言解决整个问题可能会更优雅：

const delay = ms => new Promise(res => setTimeout(res, ms));

async function countUp(start, up = 3) {
  for(let i = start, i < start + up; i++) {
    await delay(1000);
    add_count(i);
  }
  return start + up;
}

所以您可以这样做：

countUp(0, 3).then(countUp);

如何链接两个计数器函数，以便它们使用javascript / jquery顺序出现？

4 个答案: