Javascript-форум - начал изучать javascript. подскажите как остановить функию с помощью clearInterval

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - начал изучать javascript. подскажите как остановить функию с помощью clearInterval (https://javascript.ru/forum/events/80145-nachal-izuchat-javascript-podskazhite-kak-ostanovit-funkiyu-s-pomoshhyu-clearinterval.html)

начал изучать javascript. подскажите как остановить функию с помощью clearInterval

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> interactive HTML 5 </title>
</head>
<body>
<h1 id="heading"> 0 </h1>

<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>

var x=0;
var y=0;
var f =0;
var d=1;

var move= function() { $("#heading").offset( { left:x, top:y } ); x=x+d; y=y+f; if ( x > 500) {d=0; f=1; };
if (y>500) {d=-1; f=0;}; if (x<1) {d=0; f=-1}; if ( y<1 && x<1) { d=1; f=0};
};

var s=30;
var a = setInterval(move,s)
var number =[ "1","2","3","You win"];
var z=0;

var h =function () {if (z<4){a=setInterval(move,s=s/1.5); $("#heading").text(number[z]); z++; }};

$("h1").click (h);

//if (z>=4) {var k =h};

//k=clearInterval(a);

</script>
</body>
</html>

Это мини игра, нужно кликнуть на бегающую цифру. После появления надписи You win функция должна остановится. Сейчас мой вариант не активен но он не работает, подскажите в чем ошибка? я пробовал через if....else но тоже не получается

Цитата:

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

начал изучать javascript

Цитата:

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

Не нужно подключать эту устаревшую библиотеку, которая нужна для поддержки старых проектов.

Если вы хотите изучать фреймворки и библиотеки, то посмотрите следующие — Svelte, Stencil, Vue или React.

Цитата:

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

setInterval

Когда что-то меняется на экране, то следует использовать requestAnimationFrame, для отмены запланированного — cancelAnimationFrame. https://developer.mozilla.org/en-US/docs/Games/Anatomy

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title> interactive HTML 5 </title>
	<style>
		#game {
			width: 500px; height: 500px;
			user-select: none;
		}
		#heading {
			display: inline-block;
			padding: 0.5em 1em;
			background: deeppink;
			border-radius: 1em;
			cursor: default;
		}
	</style>
</head>
<body>
	<section id="game">
		<h1 id="heading"></h1>
	</section>

	<script>
		/* состояние */
		const element = document.querySelector("#heading");	
		const number = ["0", "1", "2", "3", "You win"];
		let x = 0, y = 0;
		let f = 0, d = 1;
		let z = 0;

		/* управление состоянием */
		element.addEventListener("click", event => {
			if(z < 4) z++;
		});

		/* цикл игры */
		let dt, lastT = performance.now(), requestId;

		(function loop(t) {
			requestId = requestAnimationFrame(loop);
			dt = t - lastT;
			lastT = t;

			/* изменение состояния */
			x += d * 0.1 * (z + 1) * dt;
			y += f * 0.1 * (z + 1) * dt;

			if (x > 500) {
				d = 0; f = 1;
			}
			if (y > 500) {
				d = -1; f = 0;
			}
			if (x <= 0) {
				d = 0; f = -1;
			}
			if (y <= 0 && x <= 0) {
				d = 1; f = 0;
			}

			if(z === 4) cancelAnimationFrame(requestId);

			/* отрисовка состояния */
			element.style.transform = `translate(${x}px, ${y}px)`;
			element.textContent = number[z];
		})(lastT);
	</script>
</body>
</html>

Также узнайте про <canvas>

Как-то так:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> interactive HTML 5 </title>
</head>
<body>
<h1 id="heading" style="user-select: none;"> 0 </h1>

<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>

var x=0;
var y=0;
var f =0;
var d=1;

var move= function() { $("#heading").offset( { left:x, top:y } ); x=x+d; y=y+f; if ( x > 500) {d=0; f=1; }; 
if (y>500) {d=-1; f=0;}; if (x<1) {d=0; f=-1}; if ( y<1 && x<1) { d=1; f=0};
};

var s=30;
var a = setInterval(move,s) 
var number =[ "1","2","3","You win"];
var z=0;

var h =function () {
    clearInterval(a);
    $("#heading").text(number[z]);
    if (z<3){
        a=setInterval(move,s=s/1.5);
        z++;
    }
};

$("h1").click (h); 

//if (z>=4) {var k =h};

//k=clearInterval(a);

</script>
</body>
</html>