setTimeout не будет ждать даже при ожидании вызова функции

Question

Вчера я начал изучать javascript в CodeAcademy и решил, что могу написать код.Просто шучу.Посмотрел онлайн, нашел людей с похожей кривой обучения, но ни один из ответов там не устранил мою проблему.

В HTML у меня 4 деления.3 live 600px от левого поля.1 живет 400px от левого поля.

Также есть 4 кнопки.Когда я нажимаю кнопку, я пытаюсь заставить соответствующий div скользить влево в течение секунды, пока не останется: 400px.

Раньше у меня были прыжки в div (не делали маленьких шагов, которые выглядели как скольжение) в правильное местоположение, но с тех пор сломали код.Казалось, что setTimeout не ждет установленного времени.Я провел некоторые онлайн-исследования и думаю, что к тому времени, когда setTimeout был завершен, маржа уже продолжала уменьшаться до места последнего упокоения.

Answer 1

setTimeout(slideIn(xslide), 20);

Это немедленно вызывает функцию slideIn. Вы не передаете функцию slideIn в setTimeout, вы передаете значение, возвращаемое функцией slideIn. Вы должны передать функцию в setTimeout, что означает, что вы должны сделать что-то вроде этого:

setTimeout(slideIn, 20);

Однако, таким образом, вы не можете передать параметр. Таким образом, вы заключаете его в анонимную функцию, например:

setTimeout(function (){
    slideIn(xslide);
}, 20);

Вы также можете дать функции имя для целей отладки, например:

setTimeout(function slideTimeout(){
    slideIn(xslide);
}, 20);

Обычно, если вы запускаете typeof для первого параметра того, что вы передаете setTimeout или setInterval, он должен вернуть 'function'. То, что вы используете, вернет 'undefined', поскольку вы ничего не возвращаете.

Answer 2

Ваш вызов функции в setTimeout оценивается немедленно. Вместо этого вы хотите что-то вроде этого, чтобы вернуть функцию, которая будет выполнена после истечения времени ожидания:

setTimeout(function(){slideIn(xslide)}, 20);

Answer 3

поместите вызов в контейнер функций

setTimeout(function() { slideIn(xslide); }, 20);