JSFiddle - React, Tailwind, and code Playground

by alekzonder

HTML

<script src="http://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
<div>
  <div id="map" style="float:left;"></div>

  <div style="float:left;">
    <button id="clear">
      clear
    </button>
    <pre id="log">

</pre>

  </div>
</div>

CSS

#map {
  height: 500px;
  width: 500px;
}

JavaScript

var map = DG.map(document.getElementById('map'), {
  center: [55.0415, 82.9346],
  zoom: 10
});

var timeout = null;

map.on('moveend', function() {
  debugger;
  document.getElementById('log').innerHTML += '!moveend!\n';

  timeout = setTimeout(function() {
    document.getElementById('log').innerHTML = '';
    clearTimeout(timeout);
  }, 1000);
});

document.getElementById("clear").addEventListener("click", function(e) {
  if (timeout) {
    clearTimeout(timeout);
  }
  document.getElementById('log').innerHTML = '';

  e.preventDefault();
});