CODEWITHSUNDEEP
javascriptcsssetinterval
IlllIIllllIlllIllllllIlllllIIl
IlllIIllllIlllIllllllIlllllIIl

Reputation: 183

setInterval wont work if timing is too short

I have a setInterval function that wont execute if the increment is less than 101ms. The timing will go any number above 100ms. I want to be able to increment the function by 10ms. offY and strtPos also become undefined when the timing goes below 101ms. How do I make it work the same as it is, but instead, have it incremented by 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>

Upvotes: 1

Views: 118

Answers (1)

K Scandrett
K Scandrett

Reputation: 16540

The short answer is you need to give offY a value that is not undefined initially, so I've rearranged the variables at the top of your code.

Originally, offY only gets a value after ~100ms (setInterval(st, 100)), and without a value that is not undefined the otherfunction's calculations won't work. So you needed the st function to execute first, hence requiring a value > 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>

Upvotes: 1

Related Questions