I want to show some effect (animate) with the help of jQuery during the time that should be calculated based on how many results are found for a particular needle. The rule is that the effect should continue no longer than 5 minutes and at the very least be 5 seconds long.
So, here's what I do in particular. I search a database for a particular word the user inputs and count the results. Then I search a myself defined word in the same database and count the results. If there are more the latter results than the former results, I need to calculate how long to show the effect. The more the latter results found, the shorter the time the effect should continue. Plus, I need to obey the rule: no longer than 5 minutes, no less than 5 seconds.
I need that to be accurate at best.
That may be a stupid question but I cannot figure out on my own how to calculate the time! :)
jQuery is really well documented; you should be sure to look up documentation before asking questions! http://api.jquery.com/animate/
To answer your question, jQuery's .animation() function takes in a "duration" parameter.
For instance:
$myElement = $("#animatedObject");
$myElement.animate({"width": 500}, 6000); // would animate the width of the object to be 500 pixels over 6000 milliseconds (i.e. 6 seconds).
Just pass in the duration as the second parameter.
If you are asking how to actually calculating that duration, you really need to figure that out yourself or be more clear about where you are facing problems. As it stands it sounds like you haven't attempted to solve this one on your own. As a good starting point, though you will probably want to communicate with some server side scripts using AJAX (http://api.jquery.com/category/ajax/)
Related
I'm trying to maximize attendance to a event given a list of busy times for each person. The event can be scheduled anytime between a certain date and hours (Ex. March 1st to March 8th from 9-5) and that attendance is maximized.
So far I've tried using a sliding window approach, and a counting approach described here (https://www.geeksforgeeks.org/find-the-point-where-maximum-intervals-overlap/) however I only managed to get the sliding window approach working with a time complexity of O(n^3) which unfortunately is not good enough for my use case. The counting approach does not work because I can find the maximum interval but not for a certain timeframe.
A worst case scenario use case would be ~500 people and a month timespan.
Any help would be much appreciated.
Solved using a Interval Tree (https://en.wikipedia.org/wiki/Interval_tree)
I am making a player movement with applyForce using matter.js.
I am checking for pressed keys and applying force to my character in my game loop, which is normally called 60 times per second. But the problem begins when FPS drops. If the loop is called only 30 times per second, how can I applyForce the same amount when FPS was 60?
Is there any analog of FixedUpdate like in Unity?
This is a classic problem in game development. One way you can solve this problem is instead of applying the same amount of force in every update, you can check a clock to see how much time has passed since the last update (e.g. call performance.now() in every update). Then multiply the amount of force you want to add by the amount of time that has passed.
I don't think this will work perfectly in all situations. Especially if you have small, fast moving objects, you might find objects clipping through each other. But I think this will be good enough for most cases, and you should be able to code it by hand.
I am making a game using Createjs and I have a problem with the game pausing automatically once I switch tabs. I have researched on this topic and I believe to have found out that it isn't Createjs pausing the Tickers but the browsers themselves. This has something to do with the Page Visibility API which knows when the document is hidden or visible and once hidden, I believe it slows down the RAF or setIntervals of that document which makes it seem that it is paused. This provides help to the CPU and Battery so they don't burn out.
I need my game to always keep running in the background even if the user switches tabs. What is the best way I can do this? Just want to mention that I am using Easeljs with the Tickers if that matters.
Please correct me if I was wrong with anything I said. I am still a beginner and by correcting me, I will be able to understand the real problem. Thank you for your time.
The behaviour you are describing is expected, the browser will throttle JavaScript execution to about 1 FPS.
The usual approach to get around this is to make sure your application/animations are not tied to a specific FPS. For example, here is a sample where a shape moves across the screen: http://jsfiddle.net/lannymcnie/4neobe00/2/
It takes about 5 seconds to go from the left to the right
A count shows how many times it resets
If you just add a certain amount to the sprite (such as the blue shape), it will only get updated 1 time per second when the browser frame is closed. I used 1.66 because it closely matched the speed of the other sprite.
lockedShape.x = (lockedShape.x + 1.66); // Moves a certain amount per tick
However the Ticker provides a delta in the tick event, which will be around 1 when you have a reliable framerate, but provide a multiplier you can use to determine how long the frame takes. In the sample, an index is incremented by 1 x event.delta:
index += event.delta;
Then the position is determined based on the index:
shape.x = (index/10)%500; // divide by 10 to slow it down, modulus 500 to make it loop
We can even determine how many times the item has "looped" because we know that the if you divide that index by the width, it will give you the number of loops:
text.text = (index/10/500 |0).toString(); // rough position divided by 500, rounded.
So using this approach, you can make the rest of your content run at a consistent speed, since you know how much time has elapsed since the last tick. Here is an official tutorial (which has a sample that does basically the same thing, which is what was probably in my head when I made my own example).
Note that TweenJS uses time-based tweens, and you can set framerates on MovieClips and Sprites in EaselJS, which uses this approach.
Hope that helps.
I have a situation in a web application, where based on certain conditions, I have to hide or show large number of div elements, numbers ranging from say 500 to 98000
.
What I am doing is I am applying a common class on all the div elements and then iterating the whole set of elements to check whether or not they are fitting in the circumstances and hence are shown or hide.
This logic works fine when the numbers are say in the range of 500 to 10000, but above this range, it is taking quiet some good amount of time to display the result.
I am afraid for really large numbers, this logic may result in some browsers getting hanged.
So, what could be a better approach to handle the above mentioned situation, in most of the browsers
As Blazermonger said, you're getting a poor performance because of the way you're showing/hiding all those elements. Try adding them into a container and showing/hiding the container.
Also, keep in mind that calling show() and hide() directly is more expensive than callind .css('display', '') and .css('display', 'none').
Last, please check Call show on array of jQuery objects
If you are displaying a large number of data, it would be wise to use UL LI instead of DIV with pagination if allowed and you can show/hide them as -
$(.ulClass li).toggle();
I would look at your problem from a little bit different perspective. Human beings being very complex automatons themselves have physical attributes which limit them to certain rates of consuming information. Neurons in our brain can deliver impulses at certain speed, furthermore, our brains can only contain a limited amount of information at any one time, and so on.
The numbers of elements you are trying to display to a human being are way over the limit of human perception. If any of the divs you are trying to show contained only a single word, then it would make 98000 / (6 * 24) = 680 pages of printed text. If that's some easy reading, like pulp fiction, a trained reader can read this volume of text in about a week, spending an hour a day or so, perhaps even less. There is no reason you should be displaying this much text at once. Split it into multiple pages, otherwise, even if the software will be able to handle that much data, the users will not be able to handle it, and your glorious effort will slide down the drain unnoticed...
I wrote a small jquery plugin that basically converts all words in an html element to spans, makes them invisible and then animates them into view. I made it so that you can define the time that it's supposed to take to load the whole element, and based on tests the math seems to be right, but in practice it takes quite a bit longer.
See jsfiddle: http://jsfiddle.net/A2DNN/
Note the variables "per" and "ms", this basically tells it to process "per" number of words every "ms" milliseconds.
In the log you'll see it'll process 1 word ever 1 ms, which should result in a MUCH faster loading time.
So I'm just wondering, is it possible that the CPU is forming a bottleneck here? In that JS is fading items into view, which is handled by the CPU, which isn't very fast at graphical processing.
It sounds almost silly to ask, I'd expect these days a CPU would laugh at a small bit of work load like this.
It is due to a minimum timeout forced by the browser's JavaScript implementation. You can't have a 1ms timeout, it is slightly more than that. There has already been a discussion about that here.