Ciclo de vida dos eventos

by Antério Vieira

HTML

<h4>Ciclo de vida dos eventos</h4>
<p>
	Na primeira linha você pode ver os eventos sendo disparados sem nenhum controle, na segunda linha usamos o debounce para agrupar os eventos e chamarmos somente quando necessário. Movimente o mouse nessa tela para ver os eventos em ação.
</p>
<div class="visualizacoes">
	<div class="eventos" id="eventos-limpo"></div>
	<div class="eventos" id="eventos-debounce"></div>
</div>

CSS

body {
   color: #888888;
   font: 15px/1.51 system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
   margin:0 auto;
   max-width:800px;
   padding:20px;
   background-color: #ffffff;
}

.eventos {
	padding: 10px 0 10px 0;
	heigth: 30px;
}

.eventos span {
	height: 10px;
	width: 10px;
	display: inline-block;
	border-radius: 50%;
	margin-right: 3px;
	position: relative;
}

.eventos span:last-of-type {
	top: 10px;
}

.eventos span:last-of-type:before {
    content: '';
    position: absolute;
    border-left: 1px solid #c8c8c8;
    border-right: 1px solid #c8c8c8;
	border-bottom: 1px solid #c8c8c8;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
	left: -1.5px;
    width: 100%;
    height: 100%;
    padding: 2px;
    transform: rotate(-42deg);
}

.cor0 { background-color: #eeeeee }
.cor1 { background-color: #337ab7 }
.cor2 { background-color: #5cb85c }
.cor3 { background-color: #5bc0de }
.cor4 { background-color: #f0ad4e }
.cor5 { background-color: #d9534f }
.cor6 { background-color: #777777 }

Babel + JSX

function debounce (func, wait = 1) {
	var timeout;
	
	return function(...args){
		clearTimeout(timeout);
		timeout = setTimeout(() => {
			func.apply(func, args);
			
			timeout = null;
		}, wait)
	}
}

$(document).ready(() => {

	var $eventosLimpo = $('#eventos-limpo'),
		$eventosDebounce = $('#eventos-debounce'),
		$acionamento = $(document),
		limiteCiclo = 35,
		inicializado = false,
		frequencia = 100,
		corGlobal = 2,
		corAlterar = false,
		intervalo,
		corLimpa = 0,
		corDebounce = 0,
		tamanhoMaximo = 2,
		tamanhoLinha = 0
		
	var debounceEvent = debounce((div) => {
		corDebounce = corGlobal
	}, frequencia * 4)
	
	var alterarCorDebounce = debounce((div) => {
		corGlobal++
		
		corGlobal = corGlobal > 6 ? 1 : corGlobal
		
	}, frequencia * 4)
	
	function adicionarMarcador () {
		intervalo = setInterval(() => {
			tamanhoLinha++
			
			$eventosLimpo.append($('<span />', {class: 'cor' + corLimpa, id: 'l-' +  tamanhoLinha}))
			$eventosDebounce.append($('<span />', {class: 'cor' + corDebounce, id: 'b-' + tamanhoLinha}))
			
			corLimpa = 0
			corDebounce = 0
						
			if( tamanhoLinha > tamanhoMaximo ) {
				$('#l-' + (tamanhoLinha - limiteCiclo)).remove()
				$('#b-' + (tamanhoLinha - limiteCiclo)).remove()
				
				//clearInterval(intervalo)
			}
		}, frequencia)
	}
	
	$acionamento.on('click mousemove', () => {
		if( !inicializado ){
			inicializado = true
			adicionarMarcador()
		}
		
		corLimpa = corGlobal
		debounceEvent()
		alterarCorDebounce()
	})
	
		

	

})