如果时间太短，setInterval将不起作用

setInterval wont work if timing is too short

本文关键字：setInterval 不起作用 时间 如果      更新时间：2023-09-26

我有一个setInterval函数，如果增量小于101ms，它不会执行。计时将在100毫秒以上的任何数字上进行。我想让函数增加10ms。当时间小于101ms时，offY和strtPos也变得不确定。我如何使它的工作一样，但相反，它增加了10ms?

var strtPos;
var offY;
var offX;
var hold = true;
var obj = document.getElementById('obj');
var st = function() {
  offY = obj.offsetTop;
}
var init = setInterval(function() {
  other()
}, 101);  //<-- When I change that value to below 101, it prevents the code from working
var other = function() {
  if (hold) {
    strt();
    hold = false
  };
  console.log(offY)
  console.log(strtPos)
  if (strtPos - 100 <= offY) {
    obj.style.top = (offY - 11) + "px";
  } else {
    clearInterval(init);
    hold = true;
  }
}
var strt = function() {
  strtPos = offY
}
setInterval(st, 100)
body {
  margin: 0;
}
#obj {
  width: 50px;
  height: 100px;
  background-color: red;
  position: fixed;
}
<div id="obj"></div>

简短的回答是，您需要给offY一个最初不是未定义的值，因此我重新安排了代码顶部的变量。

最初，offY只在~100ms后得到一个值(setInterval(st, 100))，如果没有一个不是undefined的值，other函数的计算将无法工作。因此需要先执行st函数，因此需要值> 100。

var strtPos;
var offX;
var hold = true;
var obj = document.getElementById('obj');
var offY = obj.offsetTop;
var st = function() {
  offY = obj.offsetTop;
}
var init = setInterval(function() {
  other()
}, 10);
var other = function() {
  if (hold) {
    strt();
    hold = false
  };
  console.log(offY)
  console.log(strtPos)
  if (strtPos - 100 <= offY) {
    obj.style.top = (offY - 11) + "px";
  } else {
    clearInterval(init);
    hold = true;
  }
}
var strt = function() {
  strtPos = offY
}
setInterval(st, 100)
body {
  margin: 0;
}
#obj {
  width: 50px;
  height: 100px;
  background-color: red;
  position: fixed;
}
<div id="obj"></div>

相关文章：