Возможна ли рекурсия в js через setTimeout?

Question

[Анар]

В качестве наркомании пишу функцию:

function userFadeout2(el, delay, opacity) {
	delay = typeof delay !== 'undefined' ?  delay : 50;

	if(el.style.opacity == "") {
		el.style.opacity = 1;
		opacity = el.style.opacity;
	}
	else if(typeof opacity !== 'undefined') {
		el.style.opacity = opacity;
	}
	else {
		opacity = el.style.opacity;
	}
	
	if(opacity == 0) {
		el.style.display = 'none';
		console.log('конец');
		return true;
	}
	else {
		setTimeout(function() {
			opacity -= 0.1;
			console.log(opacity);
			return userFadeout2(el,delay,opacity.toFixed(1));
		},delay);
	}
}

Первая реализация

function userFadeout(el, delay) {
	if(el.style.opacity == "") {
		el.style.opacity = 1;
	}
	if(el.style.opacity == 0) {
		el.style.display = 'none';
		return true;
	}
	else if((el.style.opacity -= 0.1) == 0) {
		el.style.display = 'none';
		console.log('конец');
		return true;
	}
	else {
		if(typeof delay != 'undefined' || delay == '') {
			setTimeout(userFadeout, delay, el, delay);
		}
		else {
			console.log(el.style.opacity);
			setTimeout(userFadeout, 50, el);
		}
	}
}

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

Проблема в том, что функция возвращает 'undefined' при первом же вызове, после чего не возвращает больше ничего, хотя после выполнения и завершения в консоль пишется 'конец'.
Эксперимент показывает, что если убрать setTimeout, то функция возвращает true и завершается там где и задумывается (после проверки на opacity == 0), в последней итерации.

Прогуглив никакого решения не нашёл, суть проблемы казалось бы понял, но потом понял, что ничего не понял. Не совсем понятно происходит ли вообще рекурсия (судя по всему нет), или просто вызывается "новая" функция, а "старая" завершается. В таком случае не понятно почему все остальные функции не возвращают ничего...
Кто может подсказать, в чём глубинная ошибка и непонимание? Или с setTimeout рекурсия вообще не возможна? И в какую сторону вообще смотреть и что читать?

Консоль-логи функции

undefined
0.9
0.8
0.7000000000000001
0.6
0.5
0.4
0.30000000000000004
0.19999999999999998
0.1
0
конец

Answer 1

[Сергей delphinpro]

Выбросив всё лишнее

if(opacity == 0) {
    ...
    return true;
} else {
  ...
}

видим, что если opacity не равен нулю, то ничего не возвращается.

Лень вникать, но, скорее всего вы не учли что это —
return userFadeout2(el,delay,opacity.toFixed(1));
возврат из анонимной функции-параметра setTimeout, а не вашей рекурсивной функции.

Comments

[Анар]

Ну так ничего возвращаться и не должно, возврат должен произойти только, когда opacity == 0, в противном случае функция вызывается заново. И это всё работает, когда нет setTimeout.
Я понимаю, что это возврат не самой функции, я не понимаю как это исправить. Т.е. сделать задержку иным способом.

[kreoTech]

Анар, Если возвращаться не должно, зачем тут используется return?
Тогда можно сделать вызов функции без него:
userFadeout2(el,delay,opacity.toFixed(1))

upd
Понятно, чтобы сохранить значение true при всплытии функции вверх.

[Антон Спирин]

Анар, вы все перепутали, она не возвращает undefined, а печатает его в консоль. Вы же приводите лог:

undefined
0.9
0.8
0.7000000000000001
0.6
0.5
0.4
0.30000000000000004
0.19999999999999998
0.1
0
конец

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

opacity принимает значение undefined либо при вызове либо тут:

if(el.style.opacity == "") {
    el.style.opacity = 1;
    opacity = el.style.opacity;
  }
  else if(typeof opacity !== 'undefined') {
    el.style.opacity = opacity;
  }
  else {
    opacity = el.style.opacity;
  }

setTimeout тут непричем.

[Анар]

kreotech, это сути не меняет. Условно неправильно ни то, ни другое. Проблема в том, что я не могу понять как сделать здесь правильную рекурсию, либо обойтись без неё, но сделать так, чтобы функция возвращала true, когда opacity == 0.

[Антон Спирин]

Анар, хотя верно первым вызовом она возвращает undefined, так как возврата нет.
В ней инициируются другие вызовы в setTimeut которые в значение уже попасть не могут, так как ничего не возвращается.

[Анар]

Антон Спирин, не соглашусь. В консоль это выводится, потому что я тестирую функцию запуском через консоль. Если убрать все console.log(), то в консоль всё-равно выводится "undefined" и alert(userFadeout2(el)) показывает "undefined". Либо я чего-то не понимаю, но opacity в принципе не может быть "undefined".

[Антон Спирин]

Анар, вам тут промис возвращать надо.

return new Promise(function(resolve) {
  setTimeout(function() {
      opacity -= 0.1;
      console.log(opacity);
      resolve(userFadeout2(el,delay,opacity.toFixed(1)));
    },delay);
});

Answer 2

[eRKa]

Все правильно, он и будет возвращать undefined. Я думаю, что Вы не верно трактуете выполнение setTimout(). Вот в этом участке

else {
    setTimeout(function() {
      opacity -= 0.1;
      console.log(opacity);
      return userFadeout2(el,delay,opacity.toFixed(1));
    },delay);
  }

не будет ожидания выполнения setTimeout, он создаст отложенное выполнение и вернет undefined, т.к. другого ничего не указано. Дальше setTimeout запустит Вашу функцию userFadeout2, но она так же, если opacity будет не равно 0, вернет undefined.
Лень проверять, но кажется setTimeout возвращает delay и Ваш return userFadeout2 не сработает как Вы хотите. Вам нужно сделать что-то подобие

else {
	$.when(setTimeout(function() {
		  console.log("pause");
		},delay)
	).then(function(){
		opacity -= 0.1;
		console.log(opacity);
		userFadeout2(el,delay,opacity.toFixed(1));
	});
}

Это без проверок с ходу, как пример, думаю мысль уловите.

Comments

[Антон Спирин]

$.when берет на вход deferred объект и возвращает его Promise версию. setTimeout не является ни первым, ни вторым. Колбек then выполнится быстрей чем колбек setTimeout. Конструкция бессмысленна.
Так же, тут отсутствует цепной return из рекурсивных вызовов необходимый автору.

[eRKa]

Антон Спирин, да Вы правы, не учел, что setTimout не возвращает promise и будет почти тоже самое как в коде у автора.

Answer 3

[Александр Косицын]

Функция будет возвращать только true. Где ты тестируешь функцию в devtool? Тебе консоль выводит правильно. Твоя функция возвращает undefined на первом вызове. Это когда ты в консоли запустил в первый раз функцию.
Потом консоль тебе выводит консоль логи. На второй и т д. итерациях консоль уже не будет выводить undefined.
Видимо ты ее тестишь в консоли разработчика
Поэтому такие консоли логи. Твоя функция нигде не делает return opacity.
То что ты выложил это ты проверял в консоли?

Answer 4

[Coder321]

Примерно так

function userFadeout2(el, delay, opacity) {
    return new Promise((resolve, reject) => {
        delay = typeof delay !== 'undefined' ? delay : 50;

        if (el.style.opacity == "") {
            el.style.opacity = 1;
            opacity = el.style.opacity;
        }
        else if (typeof opacity !== 'undefined') {
            el.style.opacity = opacity;
        }
        else {
            opacity = el.style.opacity;
        }

        if (opacity == 0) {
            el.style.display = 'none';
            console.log('конец');
            return resolve(true)
        }
        else {
            setTimeout(function () {
                opacity -= 0.1;
                console.log(opacity);
                return resolve(userFadeout2(el, delay, opacity.toFixed(1)));
            }, delay);
        }
    })
}