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

Question

我想按顺序运行两个函数，例如第一个函数运行s，然后是第二个函数运行s 之后。通常我可以通过简单地先调用第一个函数并将它的结果用于第二个函数来做到这一点

下面是我的代码，这里是我的 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

这意味着，您只需要 return 一个值递增 1，而不是递增 3。

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

将您的问题解释为："I want to show consecutive numbers one by one with a delay in between each number"。

使用本地方法并在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 ... 而不是您可能希望使其依赖我:

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
}

虽然这可行，但用 promises 解决整个问题可能更优雅：

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 顺序出现？

How to chain two counter functions so they occur sequentially using javascript/jquery?

javascript

jquery

asynchronous

chaining

promise