Javascript-форум - Кроссбраузерность таймеров

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

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

- - Кроссбраузерность таймеров (https://javascript.ru/forum/events/64514-krossbrauzernost-tajjmerov.html)

Кроссбраузерность таймеров

Имеется данный код:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lesson 9</title>
<style>

</style>
<script>
  var $click=0;
  var $dblclick=0;
  var $mouseover=0;
  var $mouseout=0;
  var $mouseenter=0;
  var $mouseleave=0;
  var $mouseup=0;
  var $mousedown=0;
  var $contextmenu=0;
  var $keydown=0;
  var $keyup=0;
  var $keypress=0;
  var $change=0;
  var $focus=0;
  var $blur=0;
  var $tim1;
  var $tim2;
  

  function ShowAll()
  { document.getElementById('div2').innerHTML='click: '+$click+'<br>'+
                                             'dblclick: '+$dblclick+'<br>'+
                                             'mouseover: '+$mouseover+'<br>'+
                                             'mouseout: '+$mouseout+'<br>'+
                                             'mouseenter: '+$mouseenter+'<br>'+
                                             'mouseleave: '+$mouseleave+'<br>'+
                                             'mousedown: '+$mousedown+'<br>'+
                                             'mouseup: '+$mouseup+'<br>'+
                                             'contextmenu: '+$contextmenu+'<br><hr>'+
                                             'keydown: '+$keydown+'<br>' +
                                             'keyup: '+$keyup+'<br>' +
                                             'keypress: '+$keypress+'<br>'+
											 'change: '+$change+'<br>'+
											 'focus: '+$focus+'<br>'+
											 'blur: '+$blur+'<br>';
                                             
                                         
  }
  function my_click($event) {
                             $mouseover++;
							 $mouseout++;
							 $mouseenter++;
							 $mouseleave++;
							 $dblclick++;
							 $mousedown++;
							 $contextmenu++;
							 $keyup++;
							 $keydown++;
                             $click++;
							 $keypress++;
							 $change++;
							 $focus++;
							 $blur++;
							 $mouseup++;
}
  function bgcolor() {
    document.getElementById('div2').style="background-color:yellow;"
  } 
  function single_tim($event) {
                                   $tim1=setTimeout("bgcolor();",5000);
                                   $event.preventDefault();
                                  }
  function tick() {
  my_click(event);
  ShowAll();
  $tim2 = setTimeout(tick, 1000);
}
</script>
</head>
<body>
<div id="div1" style="border: 1px solid black;">
  <input type="button" id="inp1" value="Запустить интервальный таймер" onClick="$tim2 = setTimeout(tick(), 1000);">
  <input type="button" value="Остановить  интервальный таймер" onClick="clearTimeout($tim2)">
  <input type="button" id="inp2" value="Запустить одиночный таймер(через 5 сек)" onClick="single_tim(event)">
  <input type="button" value="Остановить одиночный таймер" onClick="clearTimeout($tim1)">
</div>
 <div id="div2" style="border: 1px solid black;">
 </div>
</body>
</html>

Он по щелчку запускает таймеры,которые выводят возрастающие числа и меняют фон с задержкой в 5 секунд,а также убивают эти таймеры соответственно. В Google Chrome все замечательно работает,в Mozilla работает только изменение фона,в IE-только настакивание счетчика. Я использовал всего две функции-setTimeout и clearTimeout,однако корректно программа работает только в Google Chrome

Для начала поменяй вызовы функций в калбеках на функции.

setTimeout(tick(), 1000) - setTimeout(tick, 1000)

$tim1=setTimeout("bgcolor();",5000); - $tim1=setTimeout(bgcolor,5000);

Затем забудь про всю эту кашу и езжай на пляж.

Заменил. Та же ситуация,в Chrome работает замечательно,в остальных-через жопу

Если бы мог,с радостью забыл бы про все это скриптоблудие как страшный сон,но увы,такой возможности у меня нет

Ну посмотри хотя бы в консолях тех браузеров что-то может быть написано про ошибки или вроде того.

Ты хочешь сказать эта фантасмагория какой-то рабочий код?

Запустить интервальный таймер - ReferenceError: event is not defined
gavno.html:77:2

Вот уже стало яснее.

Работает твоя бнопня, но желтый фон ты увидишь когда div наполнится каким-то содержанием, или задай ему минимальный размер.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lesson 9</title>
<style>

</style>
<script>

var $click=0;
var $dblclick=0;
var $mouseover=0;
var $mouseout=0;
var $mouseenter=0;
var $mouseleave=0;
var $mouseup=0;
var $mousedown=0;
var $contextmenu=0;
var $keydown=0;
var $keyup=0;
var $keypress=0;
var $change=0;
var $focus=0;
var $blur=0;
var $tim1;
var $tim2;
  

function ShowAll(){
	document.getElementById('div2').innerHTML=
	'click: '+$click+'<br>'+
	'dblclick: '+$dblclick+'<br>'+
	'mouseover: '+$mouseover+'<br>'+
	'mouseout: '+$mouseout+'<br>'+
	'mouseenter: '+$mouseenter+'<br>'+
	'mouseleave: '+$mouseleave+'<br>'+
	'mousedown: '+$mousedown+'<br>'+
	'mouseup: '+$mouseup+'<br>'+
	'contextmenu: '+$contextmenu+'<br><hr>'+
	'keydown: '+$keydown+'<br>' +
	'keyup: '+$keyup+'<br>' +
	'keypress: '+$keypress+'<br>'+
	'change: '+$change+'<br>'+
	'focus: '+$focus+'<br>'+
	'blur: '+$blur+'<br>';
}

function my_click() {
	$mouseover++;
	$mouseout++;
	$mouseenter++;
	$mouseleave++;
	$dblclick++;
	$mousedown++;
	$contextmenu++;
	$keyup++;
	$keydown++;
	$click++;
	$keypress++;
	$change++;
	$focus++;
	$blur++;
	$mouseup++;
}

function bgcolor() {
	document.getElementById('div2').style="background-color:yellow;"
} 

function single_tim() {
	$tim1=setTimeout(bgcolor,5000);
}

function tick() {
	my_click();
	ShowAll();
	$tim2 = setTimeout(tick, 1000);
}

</script>
</head>
<body>
<div id="div1" style="border: 1px solid black;">

  <input type="button" id="inp1" value="Запустить интервальный таймер" onClick="$tim2 = setTimeout(tick, 1000);">
  
  <input type="button" value="Остановить интервальный таймер" onClick="clearTimeout($tim2)">
  
  <input type="button" id="inp2" value="Запустить одиночный таймер(через 5 сек)" onClick="single_tim()">
  
  <input type="button" value="Остановить одиночный таймер" onClick="clearTimeout($tim1)">
  
</div>
<div id="div2" style="border: 1px solid black;"></div>
</body>
</html>

Расскажи в качестве награды мне, что это за эпидерсия с пердимоноклем?

Misterdark,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lesson 9</title>
<style>

</style>
<script>
  var $click=0;
  var $dblclick=0;
  var $mouseover=0;
  var $mouseout=0;
  var $mouseenter=0;
  var $mouseleave=0;
  var $mouseup=0;
  var $mousedown=0;
  var $contextmenu=0;
  var $keydown=0;
  var $keyup=0;
  var $keypress=0;
  var $change=0;
  var $focus=0;
  var $blur=0;
  var $tim1;
  var $tim2;


  function ShowAll()
  { document.getElementById('div2').innerHTML='click: '+$click+'<br>'+
                                             'dblclick: '+$dblclick+'<br>'+
                                             'mouseover: '+$mouseover+'<br>'+
                                             'mouseout: '+$mouseout+'<br>'+
                                             'mouseenter: '+$mouseenter+'<br>'+
                                             'mouseleave: '+$mouseleave+'<br>'+
                                             'mousedown: '+$mousedown+'<br>'+
                                             'mouseup: '+$mouseup+'<br>'+
                                             'contextmenu: '+$contextmenu+'<br><hr>'+
                                             'keydown: '+$keydown+'<br>' +
                                             'keyup: '+$keyup+'<br>' +
                                             'keypress: '+$keypress+'<br>'+
                       'change: '+$change+'<br>'+
                       'focus: '+$focus+'<br>'+
                       'blur: '+$blur+'<br>';


  }
  function my_click($event) {
                             $mouseover++;
               $mouseout++;
               $mouseenter++;
               $mouseleave++;
               $dblclick++;
               $mousedown++;
               $contextmenu++;
               $keyup++;
               $keydown++;
                             $click++;
               $keypress++;
               $change++;
               $focus++;
               $blur++;
               $mouseup++;
}
  function bgcolor() {
    document.getElementById('div2').style="background-color:yellow;"
  }
  function single_tim($event) {
                                   $tim1=setTimeout(bgcolor,5000);
                                   $event.preventDefault();
                                  }
  function tick(event) {
  my_click(event);
  ShowAll();
  $tim2 = setTimeout(tick, 1000);
}
</script>
</head>
<body>
<div id="div1" style="border: 1px solid black;">
  <input type="button" id="inp1" value="Запустить интервальный таймер" onClick="$tim2 = setTimeout(tick, 1000);">
  <input type="button" value="Остановить  интервальный таймер" onClick="clearTimeout($tim2)">
  <input type="button" id="inp2" value="Запустить одиночный таймер(через 5 сек)" onClick="single_tim(event)">
  <input type="button" value="Остановить одиночный таймер" onClick="clearTimeout($tim1)">
</div>
 <div id="div2" style="border: 1px solid black;">
 </div>
</body>
</html>

Блин,точно же,вот я валенок.Эти ивенты еще с прошлой попытки остались,я их и не заметил.

Цитата:

Сообщение от warren buffet (Сообщение 425780)

Расскажи в качестве награды мне, что это за эпидерсия с пердимоноклем?

Таймеры прохожу,задание тут мне дали,сделать так чтобы можно было убивать все таймеры,создающиеся по событию,потому что если задать создание setInterval по щелчку,за несколько щелчков можно создать много одновременных таймеров,а clearInterval($TimerId),убьет только первый созданный,остальные будут продолжать работать и их никак не отключить. Вот я и изобрёл велосипед. Эти ивенты еще с прошлого раза остались,когда таймер планировалось убивать правой кнопкой мыши. Ну я и ткнул event.preventDefault,чтобы контекстное меню каждый раз не выскакивало. Потом я решил перенести все на кнопки,а ивенты так и оставил,хотя они уже нафиг там не нужны