Форум

Erolast · #21 (**permalink**) 05.01.2016, 09:09

Цитата:

я думал, что вызвав функцию main и вернув из неё обработчик, он (обработчик) будет доступен (благодаря замыканию).

Можно, Рони показал как: в обработчик надо ставить результат вызова функции main.

Можно еще то же самое, но не программно, а через аттрибут onclick кнопки:

<script>
function main() {
    "use strict";
    var tmr;
    function stopMove ()    { clearInterval(tmr); }
    function startMove ()   { tmr = setInterval(moveBtn, 24); }
      
    function moveBtn() { //Объявляй уж в одном стиле
        var btn = $("#btn");
        var left = parseInt( btn.css("margin-Left") ) + 1;
        btn.css("margin-Left", left + "px");
    };
     
    return startMove;
};
</script>
<button onclick="main()">Click me!</button>

Только не особо увлекайся с этими плясками. Если просто играешься - окей, но в продакшн старайся писать как можно проще.

Цитата:

а что не так я сделал?

Написал два фрагмента кода в разном стиле.
Да, тоже касательно этого отрывка, сразу не заметил: Function Declaration внутри блока - это уже ES6, так что в старых браузерах оно не заработает.

Keramet · #22 (**permalink**) 05.01.2016, 10:48

Erolast,
вот код страницы - не работает

<!doctype html>
<html>
	<head>
		<meta charset="utf8">
		<title>Макет!</title>
		<script src="js/jQuery.js"></script>
		<script>
			function main() {
				"use strict";
				var tmr;
				function stopMove ()    { clearInterval(tmr); }
				function startMove ()   { 
					tmr = setInterval(moveBtn, 24); 
					console.log("We START!!!");
				}
				
				function moveBtn() { //Объявляй уж в одном стиле
					var btn = $("#btn");
					var left = parseInt( btn.css("margin-Left") ) + 1;
					btn.css("margin-Left", left + "px");
				};
				
				return startMove;
			};
		</script>
	</head>
	
	<body>
		<header>
		</header>
		
		<main>
		       <img id="btn" src="img/button.gif">
		 </main>
		
		<footer>
			<input type='button' value='START' onclick='main()'> 
		</footer>
		
	</body>
</html>

рони · #23 (**permalink**) 05.01.2016, 11:08

Сообщение от Keramet

onclick='main()()'

Keramet · #24 (**permalink**) 05.01.2016, 13:05

рони,
"Семён Сенёнович... А-а-а!" (с)

А как на другую кнопку повесить функцию stopMove() ? Как из main() вернуть 2 функции?

рони · #25 (**permalink**) 05.01.2016, 13:22

Keramet,
возвращайте обьект {stopMove :stopMove , startMove : startMove } тогда main().stopMove() и main().startMove()

а лучше main = main()

Keramet · #26 (**permalink**) 05.01.2016, 13:31

Сообщение от рони

а лучше main = main()

сорри - вот это не понял

рони · #27 (**permalink**) 05.01.2016, 13:37

Keramet,

<!doctype html>
<html>
	<head>
		<meta charset="utf8">
		<title>Макет!</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script>
			function main() {
				var tmr;
				function stopMove ()    { clearInterval(tmr); }
				function startMove ()   {
				    stopMove ();
					tmr = setInterval(moveBtn, 24);
					console.log("We START!!!");
				}

				function moveBtn() {
					var btn = $("#btn");
					var left = parseInt( btn.css("margin-Left") ) + 1;
					btn.css("margin-Left", left + "px");
				};

				return  {stopMove :stopMove , startMove : startMove } ;
			};
           main = main()
		</script>
	</head>

	<body>
		<header>
		</header>

		<main>
		       <img id="btn" src="img/button.gif">
		 </main>

		<footer>
			<input type='button' value='START' onclick='main.startMove()'>
            <input type='button' value='STOP' onclick='main.stopMove()'>
		</footer>

	</body>
</html>

Keramet · #28 (**permalink**) 05.01.2016, 13:42

рони,
а со stopMove() не работает почему-то. я проверил таймер tmr, пишет undefined. Может его тоже в объекте возвращать из main() ? Или лучше его из startMove() возвращать?

Keramet · #29 (**permalink**) 05.01.2016, 13:46

Сообщение от рони

<script>
  function main() {
		....
  };
  main = main()
</script>

2 вопроса:
1) перед main = main() var нужен?
2) а может лучше заменить объявление функции на функциональное выражение? (var main = function () {...} )

рони · #30 (**permalink**) 05.01.2016, 14:25

Keramet,
1 нет
2 как хочешь, можно так
var main = (function () {...} )())

Форум

Справочник

Discord чат

Курсы javascript