Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.09.2018, 17:14
Новичок на форуме
Отправить личное сообщение для Беляев Антон Посмотреть профиль Найти все сообщения от Беляев Антон
 
Регистрация: 16.09.2018
Сообщений: 4

Вычисления в цикле срабатывают, не дожидаясь выполнения анимации
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
	<script type="text/javascript" src= "jquery.js"></script>
	<script type = "text/javascript" src = "script.js"></script>
	<link href = "style.css" rel = "stylesheet">
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id = "square"></div>
</body>
</html>


CSS:
Код:
#square{
	background-image: url(square.png);
	width: 68px;
	height: 68px;
	position: absolute;
}
JS:
$(document).ready(function(){
	for(var i = 0; i<3000; i++){													
	   				window.date = new Date;
	   				window.randomLeft = 0;
					$("#square").css("display", "relative");
					$("#square").animate({top: "578px"}, 5000);
					$("#square").animate({top: "22px"}, 0);
					window.milliseconds = date.getMilliseconds();
					milliseconds = date.getMilliseconds();
					if(milliseconds > 541){
						milliseconds = milliseconds - 459;
					}
					randomLeft = Math.round(Math.random() * milliseconds);
					$("#square").css("margin-left", randomLeft + "px");
				}
})


После того, как анимация падения квадрата выполняется, отступ слева (randomLeft) должен меняться. Но, так как все итерации проходят до того, как проиграется анимация, то ничего не происходит. Пробовал вместо цикла использовать setInterval, но тогда надо, что бы каждая итерация длилась столько же, сколько и анимация, а это сделать не получается. Не подскажите, как решить проблему?
Ответить с цитированием
  #2 (permalink)  
Старый 16.09.2018, 17:16
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Беляев Антон,
вам подойдет рекурсивный setTimeout
Ответить с цитированием
  #3 (permalink)  
Старый 16.09.2018, 17:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Беляев Антон,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #square{
	background-image: url(https://fastweb.it/area-clienti-aziende/gfx/form/error_icn.png);
	width: 68px;
	height: 68px;
	position: absolute;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var a = 3000,
        b = $("#square");
    ! function c() {
        a-- && b.css({
            "margin-left": Math.round(541 * Math.random()) + "px",
            top: "22px"
        }).animate({
            top: "578px"
        }, 5000, c)
    }()
});

  </script>
</head>

<body>
<div id = "square"></div>

</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 16.09.2018, 19:13
Новичок на форуме
Отправить личное сообщение для Беляев Антон Посмотреть профиль Найти все сообщения от Беляев Антон
 
Регистрация: 16.09.2018
Сообщений: 4

Я только недавно начал изучать js. Не подскажите, что происходит в строке 22?
Ответить с цитированием
  #5 (permalink)  
Старый 16.09.2018, 19:33
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Сообщение от Беляев Антон Посмотреть сообщение
что происходит в строке 22?
Там переменная a уменьшается на 1 и к переменной b присваиваются инлайново стили CSS (они 23, 24 строчка).

А вот что делает восклицательный знак (оператор НЕ) в 21-строке, вот тут и мне интересно.
Ответить с цитированием
  #6 (permalink)  
Старый 16.09.2018, 19:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от MC-XOBAHCK
А вот что делает восклицательный знак
тоже самое что (function(){})() создание фунции и сразу её выполнение

Последний раз редактировалось рони, 16.09.2018 в 19:46.
Ответить с цитированием
  #7 (permalink)  
Старый 16.09.2018, 19:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Беляев Антон
Не подскажите, что происходит в строке 22?
если а не равно нулю запустить анимацию
Ответить с цитированием
  #8 (permalink)  
Старый 16.09.2018, 20:36
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Сообщение от рони Посмотреть сообщение
тоже самое что (function(){})() создание функции и сразу её выполнение
Спасибо за разъяснение, не знал что так можно.
Ответить с цитированием
  #9 (permalink)  
Старый 16.09.2018, 20:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от MC-XOBAHCK
Спасибо за разъяснение, не знал что так можно.
там ещё пять способов!
http://javascript.ru/forum/showthread.php?p=341474
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Listenerы срабатывают сразу, не дожидаясь события, почему? __Alex__ Events/DOM/Window 9 03.09.2018 07:53
Цикл завершается не дожидаясь выполнения функции leonoff jQuery 2 13.08.2014 16:02
Отмена действия события во время выполнения анимации gunsoy Общие вопросы Javascript 2 12.06.2012 13:27
Ожидание выполнения всей анимации в функции ravisen AJAX и COMET 5 15.05.2011 22:14
Порядок выполнения анимации Tohin jQuery 3 03.07.2009 11:52