@DeniSidorenko

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

Добрый день есть такая функция
$('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 раз в секунду?
  • Вопрос задан
  • 67 просмотров
Решения вопроса 3
groog
@groog
Я только учусь
https://lodash.com/docs/4.17.15#debounce
или
https://lodash.com/docs/4.17.15#throttle
В зависимости от того какое поведение вам требуется.
Ответ написан
@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);
    }
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы