Eventos de Redimensionamento

by Antério Vieira

HTML

<p>
	Neste exemplo não aplicamos o debounce, então você verá os eventos sendo chamados sem controle. Aproveite e teste seu conhecimento adicionado o controle de evento  no painel do lado direito. 
</p>
<div class="painel-esquerdo">
	<p>Eventos brutos</p>
	<p>
		<small id="info-esquerdo"></small>
	</p>
	<p id="esquerdo"></p>
</div>
<div class="painel-direito">
	<p>Eventos controlados</p>
	<p>
		<small id="info-direito"></small>
	</p>
	<p id="direito"></p>
</div>

CSS

body {
	color: #777;
}

.painel-esquerdo, .painel-direito {
	padding: 20px 0;
	margin: 0;
	width: 45%;
	float: left;
	min-height: 200vh;
	text-align: center;
}

.painel-esquerdo {
	border-right: 1px dashed #8c8c8c;
}

Babel + JSX

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

	var $windows = $(window),
		$painelEsquerdo = $('#esquerdo'),
		$painelDireito = $('#direito'),
		$infoEsquerdo = $('#info-esquerdo'),
		$infoDireito = $('#info-direito'),
		te = 0, td = 0
		
	function exibir ($div) {
		console.log('redimensionando...');
	
		$div.prepend([
			$windows.width() + ' x ',
			$windows.height(),
			'<br />'
		].join(''))
	}
	
	$windows.on('resize', () => {
		$infoEsquerdo.text(++te + ' evento(s) disparados')
		exibir($painelEsquerdo)
	})
		
	$windows.on('resize', () => {
		$infoDireito.text(++td + ' evento(s) disparados')
		exibir($painelDireito)
	})

})