0

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

$('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 раз в секунду?

2
  • Вводите переменную lastRunTime. И следите чтоб значение lastRunTime - Now было больше одной секунды 13 апр 2021 в 6:03
  • есть общий (более менее) подход - использовать функцию throttle из библиотеки underscore. Ну или написать свою ) 13 апр 2021 в 7:45

1 ответ 1

2

Попробуйте так

let lastRunTime = Date.now();
$('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"));

      if ((lastRunTime - Date.now()) > 1000) {  
        styleElem.innerHTML = `#home-shadow:before {background-position: ${percent}% 50%`;
        lastRunTime = Date.now(); 
      }
    }
  });
3
  • now() возвращает количество миллисекунд -> ..Date.now()) > 1, эээм.. Я только проснулся, это ошибка или нет?))
    – De.Minov
    13 апр 2021 в 6:36
  • Да, скорее всего ошибка, только писал об этом) 13 апр 2021 в 6:37
  • Да поменял, странно почему то поставил сначала 1000 потом убрал и поставил 1 13 апр 2021 в 6:38

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.