主页 / 问题 / 1269493
Accepted
Dan
Asked:2022-04-13 14:00:59 +0000 UTC2022-04-13 14:00:59 +0000 UTC

如何将 mousemove 函数的执行限制为每秒 1 次？

  • 772

你好有这个功能

$('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次有限制吗？

javascript

1 个回答

  1. Best Answer

    像这样试试

    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(); 
      }
    }
  });
    • 2

相关问题