Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

Geek Culture / problem updating element with javascript

Author
Message
Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 14th May 2017 20:41
Link
User selects a bunch of files from a file input. The JS creates a progress bar with a max value matching the number of files. As each file is loading (from an ajax query), it updates the value of the progress by 1. When the value and max are equal, the progress bar is hidden. When I make the ajax call, I update the progress value from within the success callback and that's where I think I'm having a problem. Everything is being loaded but the progress bar doesn't always reach the end. I think it has to do with too many updates happening at once and so multiple elements are seeing the same progress value because it's retrieving the value faster than others can update it. Think of multiple threads accessing a non thread safe variable.

Is there a safer way I can access/update that element so this doesn't happen? My only solution I've come up with is updating a global value and have another function update the progress bar as it changes, but I think that could potentially have the same problem.


"I like offending people, because I think people who get offended should be offended." - Linus Torvalds
Back to top
Profile PM Email Website
Ortu
DBPro Master
16
Years of Service
User Offline
Joined: 21st Nov 2007
Location: Austin, TX
Posted: 14th May 2017 23:02
Link
Could the value be exceeding the max? Does it happen with >= instead of == ?

You might also put the progress bar handling into a timeout call back to ensure that the values have all updated before checking
http://games.joshkirklin.com/sulium

A single player RPG featuring a branching, player driven storyline of meaningful choices and multiple endings alongside challenging active combat and intelligent AI.
Back to top
Profile PM Email Website
Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 15th May 2017 04:08
Link
No, it's not exceeding. Basically what's happening is, as multiple calls to the current value are made so it can increment it, it's being retrieve before some elements can update it.

value = 1

A calls value: 1
A inc value: 2
B calls value: 2
C calls value: 2
D calls value: 2
C inc value: 3
D inc value: 3
B inc value: 3

Where value should be 5 at this point, it's only being overwritten as 3 because in how it gets accessed. What I would need is a way to make C, D, E wait to retrieve the value until A has updated it and so on. The others would just be pending in the meantime.

I've changed it over to using a global value, which seems to have improved the result, but it still falls behind on occasion. I'm thinking about just changing how the loading status is portrayed to the user. Instead of a progress bar, I'd have a placeholder element created for each item I'm loading. As the necessary data is loaded for that item (a movie in this case), I can update that item with the real content.


In a somewhat related problem, I'm not sure how I can append elements in jquery but keep them dynamically sorted. I have an idea about using a binary search to determine where to insert said item, but it has the potential to create the same problem as above.



"I like offending people, because I think people who get offended should be offended." - Linus Torvalds
Back to top
Profile PM Email Website
Clonkex
Forum Vice President
13
Years of Service
User Offline
Joined: 20th May 2010
Location: Northern Tablelands, NSW, Australia
Posted: 15th May 2017 10:43
Link
My guess would be that the DOM isn't being updated until the current logic thread has finished running. That might not be clear what I mean...

Ok think about it this way. Javascript is fully single-threaded. Only one function can run at once. So what happens, is normally any event functions waiting to happen get called, one at a time, in the order that they happened, until they're all finished, then the render/update thread updates the DOM and renders it all to the screen. Since it's all single-threaded, the only way your issue could occur is if the value of the progressbar isn't updating until the end of the thread. I suggest trying a global variable, like so:



Also, vanilla JS is disgusting, I wouldn't give up jQuery for the world

Placement Editor Professional -- Code Line Counter -- Tiled TMX Map Loader 2.0
Open Bezier Curve Library -- Image Tools -- MarbleX GUI Library -- NeoParticle -- Simple Serial
Back to top
Profile PM Email
Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 15th May 2017 19:02
Link
jquery is overkill sometimes. I've seen a lot sites use jquery for rather simple scripts that would be more efficient without it. I'm relying on it this time because the site I'm making will rely heavily on JS for many features, so I can justify using it. But when people use it for a simple slideshow script, it's just unnecessary. Plus, jquery's selector isn't the fastest or most efficient method for retrieving an element. It's just mildly more convenient.

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds
Back to top
Profile PM Email Website
Clonkex
Forum Vice President
13
Years of Service
User Offline
Joined: 20th May 2010
Location: Northern Tablelands, NSW, Australia
Posted: 16th May 2017 13:45
Link
Quote: "jquery is overkill sometimes. I've seen a lot sites use jquery for rather simple scripts that would be more efficient without it. I'm relying on it this time because the site I'm making will rely heavily on JS for many features, so I can justify using it. But when people use it for a simple slideshow script, it's just unnecessary. Plus, jquery's selector isn't the fastest or most efficient method for retrieving an element. It's just mildly more convenient."


Oh I definitely agree, jQuery is easily overused, but I actually wouldn't know how to do very many things in vanilla JS so that's one reason I like jQuery so much Plus I think the vanilla way of doing things is awkward, and typing "$" instead of "document.getElementById" or "p.hide()" instead of "p.style.visibility = 'hidden'" is much more than "mildly more convenient" (and well worth the overhead IMO). Depends on your use case of course. For most sites the overhead of JS is insignificant, but if you're doing something particularly performance-intensive it would be worth considering sticking to vanilla JS.

Placement Editor Professional -- Code Line Counter -- Tiled TMX Map Loader 2.0
Open Bezier Curve Library -- Image Tools -- MarbleX GUI Library -- NeoParticle -- Simple Serial
Back to top
Profile PM Email
Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 17th May 2017 13:53
Link
The overhead is ok for the average joe website. But when I worked on an enterprise level ecommerce site, cutting just a few KB from a page can save us gigs worth of data transfer. I wanted to use a 4kb library and that was considered too large to them. Though they did completely ignore the fact that it would replace 30kb of a crappy library they insisted on using despite it be incompatible with our site. Biggest headache of my life was making that thing work, and frustrating when I provided them a simple more efficient solution in a matter of hours instead of days. I hate project managers!

But yes, I agree jquery makes life so much easier and I think it's one of the greatest technologies on the web. I even wrote a jquery plugin myself, though I really need to fix it. I was implementing it into a side project of mine when I realized it has a major security flaw allowing code injection.

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds
Back to top
Profile PM Email Website
Back to top

Login to post a reply

Server time is: 2024-04-20 03:48:43
Your offset time is: 2024-04-20 03:48:43