/    Sign up×
Community /Pin to ProfileBookmark

setInterval timing

Copy linkTweet thisAlerts:
Apr 02.2008

I am pretty new to web developing and javascript. I am trying to make a function to move object to another location with animation. So naturally I have to use setInterval to move an object every defined interval.

I wanted the function to have the following arguments (obj, x, y, time). Obj being the object being moved. X and y are coordinates to move to. Time is the time it takes to move there. Interval is just set at 10.

My pseudo-code is basically, assuming time is set at 5 seconds:

Interval Per Second = 1000ms / 10 intervals = 100 intervals per second
Total Intervals = 100 intervals per second * time = 500 intervals

DistanceX = x – obj.x = distance x to travel for the object to target coordinates
DistanceY = y – obj.y = distance y to travel for the object to target coordinates

SpeedX = DistanceX/Total Intervals = DistanceX that needs to be traveled per interval.
SpeedY = DistanceY/Total Intervals = DistanceY that needs to be traveled per interval.

setInterval(move, 10)

currentInt = 0
move() {
if currentInt = totalInterval { clearInterval }
else {move the object by speedx and speedy}
}

after all that, the object moves to the desired location, but not within the specified time. It takes longer. It looks like the setInterval timer is not executing the move function 100 times a second like I specified it to. Is it because the computer can’t process it 100 times a second?

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@Declan1991Apr 02.2008 — The problem is that Javascript does not have an accurate timer. It depends on the users system, so if you have an extremely fast computer, it should run faster. Off the top of my head, anything below 50 milliseconds cannot be used accurately. So, yes, the computer cannot process it, however, some computers might be able.
Copy linkTweet thisAlerts:
@daemonkauthorApr 02.2008 — Is it possible to somehow get the function to compare its timing with an independent accurate timing system and move the object based on that? Is there access to the computer clock? down to milliseconds? So instead of setInterval, do something like:

var startTime = now

function compareTime {

var timeElapse = now - starTime.

Distance = speed * timeElpase

obj.move(new coordinates)

}
Copy linkTweet thisAlerts:
@mrhooApr 02.2008 — Anytime you write code that causes the browser to redraw the page you introduce an unknown processing time that can cause an interval to stutter.

A call to setTimeout after the processing is done will make the display render smoothly, but not as quickly as the interval.

You can set a global start time, and after the function does its thing,

set a timeout based on the (current time - the start time).

If you want ten redraws a second you could set the timeout to 100-the difference you found.

You may find that setting the timeout to 0 is good enough- it forces the redraw before it calls the next one.
×

Success!

Help @daemonk spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...