Форум

Saratov64 · #1 (**permalink**) 02.02.2017, 14:26

Добрый день.
Я новечек в js.
Сделал статичный веб. Задача диначески обновлять по каждой ссылки мгновенные данные, поступающие с датчиков, и отображать в таблицы. Таблицы выводить на экран.
Создал скрытый DIV. В него вывожу данные.
Кликаю по менюшке, данные выводятся, но безконечно - вечно.
Нашел стандартный скриптик. Его прикрутил.

<script type="text/javascript">

		function allstation() {
			
			$.ajax({
				url: 'allstation.php',
				success: function(data) {
					 
					$('#display').html(data);
				}
			});
		}

		var timeInterval = 5000;
		setInterval(allstation, timeInterval); 		
	</script>

На каждую кнопку повесил данный скрипт.
Скрипт стартует сам, если убрать setInterval(allstation, timeInterval); то нормально нажатие, но тогда не обновляется контент постоянно.
Мне надо выход из (простите за делитантизм) из setInterval при нажатии на другую кнопку.
Как я понимаю:
1) нужно использовать clearInterval.
2) показывать скрипту, что он в процессе inProcess, чтобы не было автостарта при setInterval
Помогите пожалуйста, поправить данный скрипт.

рони · #2 (**permalink**) 02.02.2017, 15:06

Saratov64,

var timer = setInterval(allstation, timeInterval); 
     clearInterval(timer);

Saratov64 · #3 (**permalink**) 02.02.2017, 15:29

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

Saratov64,

var timer = setInterval(allstation, timeInterval); 
     clearInterval(timer);

сделал тестовый файл time.php
чтобы отследить изменения

<?php echo date("H:i:s"); ?>

<script type="text/javascript">

		function allstation() {
			
			$.ajax({
				url: 'allstation.php',
				success: function(data) {
					 
					$('#display').html(data);
				}
			});
		}

		var timer = setInterval(allstation, timeInterval);
         clearInterval(timer);			
	</script>

молчит (((((

рони · #4 (**permalink**) 02.02.2017, 15:48

Saratov64,
clearInterval(timer); вам нужно добавить в то место где вы хотите остановить интервал.
в целом это был совет наугад, не понимаю что вам нужно.

Saratov64 · #5 (**permalink**) 02.02.2017, 15:50

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

Saratov64,

var timer = setInterval(allstation, timeInterval); 
     clearInterval(timer);

упростил, тест алертом сделал

<script type="text/javascript">

		function allstation() {
			
			alert ("ТЕСТ");	
		}
		
		var timer = setInterval(allstation, timeInterval);
     clearInterval(timer)
	</script>

МОЛЧОК Разово выполняет и все.

Saratov64 · #6 (**permalink**) 02.02.2017, 15:54

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

Saratov64,
clearInterval(timer); вам нужно добавить в то место где вы хотите остановить интервал.
в целом это был совет наугад, не понимаю что вам нужно.

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

цель: при нажатии на кнопку, запускает функция, и выполняет опрос базы данных (мгновенные данные которые заливаются в бд), каждые 10 секунд, и выводить в таблицу.
Нужно, при нажатии на ДРУГУЮ ЛЮБУЮ КНОПКУ, прирывать выполнения функции function allstation().
Если можно на примере с alert. Нажал на кнопку, каждые 10 сек, появляется сообщение, нажал на другую кнопку, данное сообщение прирывалось.
Получается, надо какое-то условие, для прерывания выполнения данной функции. if (click.document), если я правильно понял при любом клике на ДРУГИЕ ССЫЛКИ в документе, прирывать выполнение функции данной кнопки .....
хотя, я может не правильно ставлю себе задачу, по работе функции данной ...

рони · #7 (**permalink**) 02.02.2017, 16:00

Saratov64,

$("ДРУГУЮ ЛЮБУЮ КНОПКУ").on("click",  function() {
clearInterval(timer)
             })

рони · #8 (**permalink**) 02.02.2017, 16:07

Saratov64,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var btn = document.querySelector("#btn");
    btn.addEventListener("click", function() {
        clearInterval(timer)
    });

    function allstation() {
        document.querySelector("#main").innerHTML += "test "
    }
    var timeInterval = 1E3;
    var timer = setInterval(allstation, timeInterval)
});
  </script>

  </script>
</head>

<body>
<div id="main"></div>
<input id="btn" name="" type="button" value="stop">
</body>
</html>

Saratov64 · #9 (**permalink**) 02.02.2017, 19:07

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

Saratov64,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var btn = document.querySelector("#btn");
    btn.addEventListener("click", function() {
        clearInterval(timer)
    });

    function allstation() {
        document.querySelector("#main").innerHTML += "test "
    }
    var timeInterval = 1E3;
    var timer = setInterval(allstation, timeInterval)
});
  </script>

  </script>
</head>

<body>
<div id="main"></div>
<input id="btn" name="" type="button" value="stop">
</body>
</html>

Коньяк бы, Вам, передать ....
спасибо большое.
Вообщем, надо с нуля за учебник, каждую мелочь не спросишь.
еще раз спасибо !!!

Saratov64 · #10 (**permalink**) 03.02.2017, 20:25

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

Saratov64,

$("ДРУГУЮ ЛЮБУЮ КНОПКУ").on("click",  function() {
clearInterval(timer)
             })

Задам, еще раз вопрос по теории. Не могу понять, принцип работы clearInterval.
написал свой код который стартует по кнопке, и остановливается по другой кнопке.
Но проблема и вопрос в том, если перменные снаружи, вне функции, то функция стартует автоматически при загрузке страницы, и ее можно остановить с помощью clearInterval(timer); А вот если переменные
setInterval спрятать внутри функции то, она стартует ПРАВИЛЬНО по клику кнопки, но нифига не работает останов. Как буд-то id не видит, или еще какой-то нюанс который я не понимаю в теории событий javascript. Если можно, поясните пожалуйста, как это работает.

<script type="text/javascript">
		var timer
		var timeInterval = 5000;
		timer = setInterval(allstation, timeInterval);
	
function allstation() {
		
		 $("#display").load('allstation.php');
			
		}
	
	
	$("#stp").click(function(){
	clearInterval(timer);
	alert ("stop");
});

</script>

Форум

Справочник

Discord чат

Курсы javascript