Как ограничить выполнение функции mousemove 1 раз в секунду?

Question

[DeniSidorenko]

Добрый день есть такая функция

$('body').mousemove(function(evt){
    if(evt.target.classList[0] == 'home-shadow'){
      var totalWidth = $('.home-shadow').width()
      var rect = evt.target.getBoundingClientRect()
      var x = evt.clientX - rect.left; 
      var percent = x*100 / totalWidth
      console.log(percent)

      var styleElem = document.head.appendChild(document.createElement("style"));

      styleElem.innerHTML = `#home-shadow:before {background-position: ${percent}% 50%`;
    }
  });

Все работает хорошо и эта функция меняет позицию фона, но проблема в том что mousemove выполняется при каждом px мышки, и так и должно работать но и за этого функция выполняется очень часто и даже мой ноут включает кулер в этот момент. Вопрос, как сделать что бы

styleElem.innerHTML = `#home-shadow:before {background-position: ${percent}% 50%`;

Имела ограничения на выполнение 1 раз в секунду?

Answer 1

[WapSter]

https://medium.com/nuances-of-programming/%D1%87%D...

Answer 2

[Даниил Попов]

https://lodash.com/docs/4.17.15#debounce
или
https://lodash.com/docs/4.17.15#throttle
В зависимости от того какое поведение вам требуется.

Comments

[WapSter]

#debounce не ограничивает выполнение функции раз в секунду, она выполняет функцию по проществию какого-то времени после последнего вызова debounce

[Даниил Попов]

WapSter, вы правы. Тут на выбор debounce или throttle, в зависимости от того, что требуется автору.

Answer 3

[ksnk]

Довольно накладно менять стиль в списке стилей, чтобы они поменяли бякграунд у единственного элемента. Не проще ли явно менять стиль у этого самого элемента? Явно будет эффективнее.

Ну а по сути вопроса - вот так можно без дополнительных сущьностей. 10 строк и никакого мошенничества с npm ...

function moveBg(evt){
    if(!!moveBg.timeout){ // функция недавно вызывалась  - запоминаем параметр и ждем;
        moveBg.evt=evt;
        return ;
    }
    // начинаем засечку времени 1 сек. По окончании таймаута вызываем функцию с  последним актуальным параметром, если надо
    moveBg.timeout=setTimeout(function(){moveBg.timeout=null; if(!!moveBg.evt){moveBg(moveBg.evt); moveBg.evt=null}},1000 );
    // дальше без изменений и коррекций
    var totalWidth = $('.home-shadow').width()
    var rect = evt.target.getBoundingClientRect()
    var x = evt.clientX - rect.left;
    var percent = x*100 / totalWidth
    console.log(percent)

    var styleElem = document.head.appendChild(document.createElement("style"));

    styleElem.innerHTML = `#home-shadow:before {background-position: ${percent}% 50%`;
}

$('body').mousemove(function(evt){
    if(evt.target.classList[0] == 'home-shadow'){
        moveBg(evt);
    }
});