Оптимизация кода от гуру

Question

В качестве практики решил сделать абсолютно простую вещь: область, внутри которой появляется плашка, показывающая текущие координаты курсора, и за курсором следящая. Вот область:

<div id="elem" style="width: 400px; height: 400px; margin: 0 auto; background-color: red; position: relative;"><span></span></div>

Все ок, вот джаваскрипт, привязка функции к движению мыши:

var elem = document.getElementById('elem'); 
elem.addEventListener('mousemove', create);

Далее, сама функция create:

function create(event) {
        var x = event.clientX; //получение координат мыши по x
        var y = event.clientY;  //по y
        let parent = document.querySelector('#elem'); //получение объекта-родителя
        let removed = document.getElementsByTagName('span'); //получение того, кого удаляем. Я не придумал как можно сделать так, чтобы сначала span появлялся, а потом удалялся, поэтому первым следует удаление
        parent.removeChild(removed[0]); //собственно, удаление
        let p = document.createElement('span'); //создание нового span
        p.style.backgroundColor = 'yellow'; //украшение
        p.style.position = 'absolute'; //позиционирование относительно курсора сделал через абсолютные и относительные координаты
        p.style.top = y-20 + 'px'; //задаем эти координаты 
        p.style.left = x-580 + 'px'; //и снова
        p.innerHTML = x + "," + y; // пихаем внутрь координаты курсора
        parent.appendChild(p); //рожаем этот span
    }

В общем, все вроде работает, но видно плавное отставание span от курсора при быстром дергании курсора. Есть способы сделать это прям в две строчки с помощью каких то свойств высшего порядка?

Answer 1

Ну универсальное правило: Если что-то не должно меняться, по возможности создать/вычислять его только один раз, а после события трогать только то, что правда меняться (координаты и текст):

let mama = document.getElementById('mama');
let hint = document.getElementById('hint');

mama.addEventListener('mousemove', function(e) {
  hint.style.left = e.pageX + 20 + 'px';
  hint.style.top = e.pageY + 10 + 'px';
  
  hint.textContent = (
    ' x: ' + (e.pageX - this.offsetLeft) + 
    ' y: ' + (e.pageY - this.offsetTop)
  );
});

mama.addEventListener('mouseenter', function() {
  hint.style.display = "block";
})
mama.addEventListener('mouseleave', function() {
  hint.style.display = "none";
})

#mama {
  width: 400px;
  height: 400px;
  background: #123;
  margin: 10px;
}

#hint {
  position: absolute;
  display: none;
  width: 100px;
  height: 20px;
  padding: 4px;
  background: orange;
  border: 2px solid white;
  box-shadow: 0 0 0 1px orange;
}

<div id="mama">
  <div id="hint"></div>
</div>

БЛОГ НА HUSL

Оптимизация кода от гуру

Ответы (1 шт):