Как связать две функции счетчика, чтобы они происходили последовательно с помощью javascript / jquery?

Я хотел бы запускать две функции последовательно, чтобы запускалась первая функция, а затем вторая функция запускается после. Обычно я могу сделать это, просто сначала вызов первую функцию и используя ее результат для второй функции

См. Ниже мой код и здесь для моего кода

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

Следует отметить, что важно, чтобы вторая функция использовала результат первой функции.

javascript,jquery,asynchronous,promise,chaining,

1

Ответов: 4

0 принят

Вы можете добавить другое значение, потому что у вас разные времена для тайм-аута.

У вас есть

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);

0 
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)
})
0

Вы можете установить тайм - ауты , как 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
}

Хотя это работает, было бы более элегантно решить все это с помощью обещаний:

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);
0

Интерпретировал ваш вопрос следующим образом: «Я хочу показывать последовательные номера один за другим с задержкой между каждым числом».

Используйте локальный метод и вызовите его 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>

JavaScript, JQuery, асинхронный, обещание, сцепление,
Похожие вопросы
Яндекс.Метрика