Testing Window Throttling

by kthornbloom

HTML

<div class="webtext-copywriters">
Written by people
</div>
<div class="webtext-block">
  <h2>
  This is a Heading
  </h2>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero obcaecati, perferendis consectetur, aperiam consequatur perspiciatis fuga temporibus veritatis totam! Sit at adipisci nihil asperiores atque, quaerat accusamus sequi repellendus et!
</div>

JavaScript

var delay = 250,
		timeout = false;// delay between calls
    
// Move the author byline above or below the first webtext <h2> depending on window width
function moveAuthorByline() {
	console.log('event fired');
  const firstWebtextBlock = $('.webtext-block:first');
  const firstHeadline = $('.webtext-block:first h2');
  const authorByline = $('.webtext-copywriters');
  if (firstHeadline && authorByline) {
    if (window.innerWidth < 768) {
      authorByline.insertAfter(firstHeadline);
    } else {
      authorByline.insertBefore(firstWebtextBlock);
    }
  }
}

window.addEventListener('resize', function() {
  // clear the timeout
  clearTimeout(timeout);
  // start timing for event "completion"
  timeout = setTimeout(moveAuthorByline, delay);
});


moveAuthorByline();