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

Question

我有一个 setInterval 函数，如果增量小于 101 毫秒，该函数将不会执行。时间将超过 100 毫秒。我希望能够将函数增加 10 毫秒。当时间低于 101 毫秒时，offY 和 strtPos 也变得未定义。我怎样才能让它像现在一样工作，而不是增加 10 毫秒？

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>

Answer 1

简短的回答是您需要给 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>

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

setInterval wont work if timing is too short

javascript

css

setinterval