With the below code:
$('#button').on('click', function () {
var longArray = searchArray; // assume this has 100 or more postalcodes init
var shortArrays = [], i, len;
for (i = 0, len = longArray.length; i < len; i += 100) {
shortArrays.push(longArray.slice(i, i + 100));
}
// Now we iterate over shortArrays which is an array of arrays where each array has 100 or fewer
// of the original postalcodes in it
for (i = 0, len = shortArrays.length; i < len; i++) {
// shortArrays[i] is an array of postalcodes of 100 or less
$.each(shortArrays[i], function(index, value){
setTimeout( function() {
// Each parent gets its own searchToggle class
$('.postcodes input[data-postcode*="' + value + '"]').parent().parent().addClass('searchToggle');
// Each parent also gets a data filter attribute for ordering the results
$('.postcodes input[data-postcode*="' + value + '"]').parent().parent().attr('data-filter' , index);
// We display the items in the search array
$('.postcodes input[data-postcode*="' + value + '"]').parent().parent().css('display', 'flex');
$('.postcodes .searchToggle .postcode input[data-postcode*="' + value + '"]').parent().css('display', 'flex');
}, 0 );
})
} // /for
alert('Finished message');
});
I try to show an alert message(for debugging) once the $.each() is finished. Since this each goes through an array that could be 1000s of postal codes long I broke it up in chunks of 100. This to prevent the dreaded browser is unresponsive. This is all working fine but the alert fires immediately on click.
I have tried several things already:
I tried by using a count: ABOVE THE EACH var count = 0; INSIDE THE EACH count++ if ( count == longArray.length ) { ALERT } But this also fired the alert immediately???
I tried it by using an interval but that became a mess almost instantly.
I tried a couple of other SO answers but all of them resulted in the alert to fire immediately.
When looking through the jQuery docs and previous codes that I have written it should just run the code after the each is finished but in this case it does not.
Any idea on why this is and how I can fix it.
PS: This alert could be other codes! Like sorting the results or something else.
PS2: I can change all the js/jQuery you see but I cannot change any of the HTML selectors.
PS3: Thank you for thinking about this issue and especially for commenting/answering!
I have solved it by adding another setTimeout.
So I replaced the alert (see Question) from
alert(Finished message);
To
setTimeout( function() {
// As an example I used alert in my question and here in this answer.
// This can be offcourse anything else. I use it for instance to sort the results.
alert(Finished message);
}, 0 );
This works for me, but it might not be the best way to deal with it. So I am still looking forward to what more experienced people think about the question or the answer.
Related
Okay, I hope you don't all facepalm when you see this - I'm still finding my way around javascript.
I am putting together an RSVP form for a wedding website.
I want the guests to be able to add their names to the RSVP form, but only have as many fields showing as required. To this end, after each name field, there is a link to click, which will, when clicked, show a name field for the next guest.
The code below works... but I am sure it can be tidier.
I have tried to insert a for() loop into the code in several different ways, I can see that the for() loop increments correctly to the last value - but when it does so, it leaves only the last addEventListener in place. I can only assume, that I should be using a different kind of loop - or a different approach entirely.
How should I tidy up the following?
<script>
function showNextGuest(i) {
document.getElementsByTagName(\'fieldset\')[i].style.display = \'block\';
}
function initiateShowNextGuest() {
document.getElementsByTagName('fieldset')[0].getElementsByTagName('a')[0].addEventListener('click',function(){showNextGuest(1);},false);
document.getElementsByTagName('fieldset')[1].getElementsByTagName('a')[0].addEventListener('click',function(){showNextGuest(2);},false);
document.getElementsByTagName('fieldset')[2].getElementsByTagName('a')[0].addEventListener('click',function(){showNextGuest(3);},false);
document.getElementsByTagName('fieldset')[3].getElementsByTagName('a')[0].addEventListener('click',function(){showNextGuest(4);},false);
document.getElementsByTagName('fieldset')[4].getElementsByTagName('a')[0].addEventListener('click',function(){showNextGuest(5);},false);
}
window.onload = initiateShowNextGuest();
</script>
Your intuition is right - a for loop could indeed simplify it and so could a query selector:
var fieldsSet = document.querySelectorAll("fieldset"); // get all the field sets
var fieldss = [].slice.call(asSet); // convert the html selection to a JS array.
fields.map(function(field){
return field.querySelector("a"); // get the first link for the field
}).forEach(function(link, i){
// bind the event with the right index.
link.addEventListener("click", showNextGuest.bind(null, i+1), false);
});
This can be shortened to:
var links = document.querySelectorAll("fieldset a:first-of-type");
[].forEach.call(links, function(link, i){
link.addEventListener("click", showNextGuest.bind(null, i+1), false);
});
function nextGuest () {
for(var i = 0; i < 5; i++){
document.getElementsByTagName('fieldset')[i]
.getElementsByTagName('a')[0]
.addEventListener('click',function(){
showNextGuest(parseInt(i + 1));
}, false);
}
}
Benjamin's answer above is the best given, so I have accepted it.
Nevertheless, for the sake of completeness, I wanted to show the (simpler, if less elegant) solution I used in the end, so that future readers can compare and contrast between the code in the question and the code below:
<script>
var initiateShowNextGuest = [];
function showNextGuest(j) {
document.getElementsByTagName('fieldset')[j].style.display = 'block';
}
function initiateShowNextGuestFunction(i) {
return function() {
var j = i + 1;
document.getElementsByTagName('fieldset')[i].getElementsByTagName('a')[0].addEventListener('click',function(){showNextGuest(j);},false);
};
}
function initiateShowNextGuests() {
for (var i = 0; i < 5; i++) {
initiateShowNextGuest[i] = initiateShowNextGuestFunction(i);
initiateShowNextGuest[i]();
}
}
window.onload = initiateShowNextGuests();
</script>
In summary, the function initiateShowNextGuests() loops through (and then executes) initiateShowNextGuestFunction(i) 5 times, setting up the 5 anonymous functions which are manually written out in the code in the original question, while avoiding the closure-loop problem.
I have a form where the user can add X number of rows, with each row having a start time and end time input.
The rows can be added as the user likes, and the times do not have to be entered sequentially, but must not conflict when submitting the form.
So far, I am able to check for conflicts, using a couple of for loops and checking each start and end time against the rest.
The problem I am facing, is that obviously, if row 1 and 2 conflict, my code is logging two conflicts (logically correct!)
I only want to show the first conflict, as once this is resolved, naturally, the second conflict is.
My code for far:
$('form').submit(function(event){
event.preventDefault();
var errors = [];
var data = serializedToObject($(this).serializeArray());
for(var i = data.row.length; i--;) {
for(var s = data.start.length; s--;) {
if(s != i) {
if(data.start[i] < data.end[s] && data.start[s] < data.end[i]) {
errors.push('Conflict between ' + data.row[i] + ' and ' + data.row[s]);
}
}
}
}
if(errors.length === 0) {
this.submit();
} else {
console.log(errors);
}
});
(serializedToObject simply converts the form data to an object)
So how do I have my code only push 1 of the conflicts to the array?
I tried adding the row ID to an object and pushing that to the array, but it wouldn't log additional conflicts later down the line e.g. Row 1 conflicts with 2 and 4, the conflicts between 1 and 4 would not be mentioned, as row 1 is already in the array.
I have an answer for you, but it is not that efficient (again O(n^2), as you code in the question ).
If i understood correctly , data.start.length and data.row.length has to be equal, right? If so, if you count the s from i-1 to 0, and the errors are (1,2) and (2,1) , (1,2) won't get cought becouse the second loop starts from i-1, in the case where i=1, s starts directly from 0. just take a look at the code below (only included the for loops) :
var length = data.row.length;
for( var i = length; i>0; i-- ) {
for( var s = i-1; s>0; s-- ) {
if(data.start[i] < data.end[s] && data.start[s] < data.end[i]) {
errors.push('Conflict between ' + data.row[i] + ' and ' + data.row[s]);
}
}
}
I hope somebody will come with a comment with an idea to optimise this, maybe O(n) if it is possible :D. But this will work for you , and in case where you don't have length variable as big as 100.000, it will work just swell!
I know maybe this is not possible.
I have searched the web but without suceess
I have a while loop and I want to do two things:
Update a textarea with formatted information
Update the width of div (a progress bar).
The first function has 4-5 additional sub-functions.
Basically I have a 6 elements numerical array. I have a custom format function to create a formatted string elements for my numbers. etc.
if (reg_index/reg_total > last_refresh) {
window.setTimeout (
function() {
document.getElementById("progress_line").style.width = "" + 100 * last_refresh + "px";
document.getElementById("progress_value").innerHTML = my_format( 100*last_refreh, "###" ) + "%";
},
5
);
last_refresh+=0.01;
}
Ok, I'm unable to define a right timeout interval to get what I want.
Can anybody point me to a useful link?
Thanks.
The problem you're having here is that all of your functions will use the last value of last_refresh. When you define a function, it has an enduring reference to the variables in scope, not a copy of their values when it's created. More: Closures are not complicated
You could do this:
function update() {
if (reg_index/reg_total>last_refresh)
document.getElementById("progress_line").style.width =" "+100*last_refresh+"px";
document.getElementById("progress_value").innerHTML=my_format(100*last_refreh,"###")+"%";
last_refresh+=0.01;
setTimeout(update, 0); // Or 5 or whatever
}
}
update();
That uses a function that does a bit of the work, then schedules itself to do more of the work in a moment. It closes over the reg_index, reg_total, and last_refresh variables.
If you know it needs to run at least once, you can make it slightly more efficient:
function update() {
document.getElementById("progress_line").style.width =" "+100*last_refresh+"px";
document.getElementById("progress_value").innerHTML=my_format(100*last_refreh,"###")+"%";
last_refresh+=0.01;
if (reg_index/reg_total>last_refresh)
setTimeout(update, 0); // Or 5 or whatever
}
}
update();
To help with the concept of looping with setTimeout, compare this standard loop (the browser doesn't update until the very end): Live Copy | Live Source
var a = ["zero", "one", "two", "three", "four", "five"];
var index;
for (index = 0; index < a.length; ++index) {
display("Entry " + index + " is " + a[index]);
}
...with this equivalent using setTimeout, which yields to the browser on every iteration so it can update (and even if the interval is 0, it runs much more slowly — I've used 200 here so you can see it run): Live Copy | Live Source
var a = ["zero", "one", "two", "three", "four", "five"];
var index;
index = 0;
update();
function update() {
display("Entry " + index + " is " + a[index]);
++index;
if (index < a.length) {
setTimeout(update, 200);
}
}
Below you've said:
Unfortanetly I cant apply at my example.... I have a main loop with 2000 reads on local database.... I have done it works using timeouts but now my code spends a lot of time
I usually deal with that by breaking things up in to chunks (or see below for another alternative), example: Live Copy | Live Source
var index;
var total = 10000; // 10,000 to do in total
index = 0;
update();
function update() {
var limit = Math.min(index + 100, total); // Do them 100 at at time
while (index < limit) {
if (index % 10 == 0) {
display("Process entry #" + index);
}
++index;
}
if (limit < total) {
setTimeout(update, 200);
}
}
Choose the size of the chunks so that you're updating (yield) often enough, but not updating (yielding) so much that you lose too much time. The above does it based on the number of loops, but another way is to let yourself run for (say) one full second and then yield. You can get a lot of work done in a second.
The other alternative is to use web workers, at least on the browsers that support them. My other answer here on Stack Overflow has a discussion and example.
Even if you use web workers, though, you'll probably want to break the work into chunks, because if you have 2,000 records to get through, it doesn't make sense to update the progress bar 2,000 times &mdasdh; you'll just do updates a human can't readily perceive. 100 updates would be more than enough, probably even just 20 (so, 100 records/chunk) would be fine.
I am using the Colorbox Lightbox script to call a hidden div on a page. It works great but there is a catch. I have 15 hidden divs. When a link is clicked I would like a new lightbox to show each time without repeating until all have been shown. I do not know how to do this.
Here is my code to call the lightbox:
$(".colorbox").colorbox({
inline:true
});
Here is the HTML of the hidden divs
<div class="hide">
<div id="lightbox1">
<!-- Content -->
</div>
<div id="lightbox2">
<!-- Content -->
</div>
<!-- etc -->
</div>
How would I call each div at random until all have been shown then start over?
Also is there a way that once divs 1 - 15 have been shown to then show one last div (id="last-div") before restarting?
Note: All divs would be called on a click and I am using jQuery 1.8.2.
I do not know where to start, I have seen scripts using Math.random() but I do not understand enough to make that work.
UPDATE
I have tried Ian's answer but the lightbox is not showing (but I can see in the console log that the script is working)
Originally he has this in his script:
$(selector).show();
which I changed to this:
$(selector).colorbox({inline:true });
What do I need to do to call the lightbox?
Note: No errors are thrown.
So my idea was similar to Eric's, but I wanted to make it work "completely". So instead of storing references to all the divs in an array, I just decided to store an array of ints representing each div. The way I eventually select them with jQuery is "#lightbox + i", so if you don't have this exact structure (where the divs have an id like "lightbox" and an int - from 1 to the last count), then you can use .eq() or nth-child. It won't be the exact same results, but it will have the same random effect, just done in a different way. I found a function that "randomizes" an array - I'm guessing like what Eric's Shuffle does. But here's where I got it from - How to randomize (shuffle) a JavaScript array? . I had to modify it to return a new array instead of modify the one passed to the function. Also, I kept everything in the document.ready scope, instead of the global scope, so things are passed/returned a lot. It worked fine before when I had all and randomed declared globally and didn't pass them around, I just thought this would be "better" since they weren't global.
Here's the fiddle:
http://jsfiddle.net/6qYCL/1/
And here's the Javascript:
$(document).ready(function () {
var all,
randomed;
all = generateAll();
randomed = generateRandomed(all);
$("#generator").on("click", function (evt) {
evt.preventDefault();
randomed = doNext(all, randomed);
});
});
function generateAll() {
// Generates the array of "all" divs to work on
var a = [];
var divs = $(".hide > div.lightbox");
for (var i = 1; i <= divs.length; i++) {
a.push(i);
}
console.log("List of divs available to toggle: " + a);
return a;
}
function generateRandomed(all) {
// Randomizes the original array
randomed = fisherYates(all);
console.log("Setting randomized array: " + randomed);
return randomed;
}
function doNext(all, randomed) {
$(".lightbox, #last-div").hide();
if (randomed.length < 1) {
console.log("All lightboxes toggled, showing last, then starting over");
$("#last-div").show();
randomed = generateRandomed(all);
} else {
var next = randomed.shift();
var selector = "#lightbox" + next;
console.log("Showing " + selector);
$(selector).show();
console.log("What's left: " + randomed);
}
return randomed;
}
// Randomizes an array and returns the new one (doesn't modify original)
function fisherYates ( myArray ) {
var return_arr = myArray.slice(0);
var i = return_arr.length;
if ( i == 0 ) return false;
while ( --i ) {
var j = Math.floor( Math.random() * ( i + 1 ) );
var tempi = return_arr[i];
var tempj = return_arr[j];
return_arr[i] = tempj;
return_arr[j] = tempi;
}
return return_arr;
}
It accounts for getting to the end of the list and display #new-div like you mentioned, then starting the process over. If you look in your browser's console, you can "watch" what's happening during initialization and when clicking the link.
I think this is close to what you were looking for. I'm not sure which is a better solution - storing references to the elements or just an array of ints to loop through and eventually find. I know there are many variations on how to do this - when/how to store the counting stuff, when/how to randomize the array or retrieve a random value (and how to keep track of which has been used), where to store all references, and plenty more. I hope this at least helps!
Create an array of all of them, then shuffle that array, then pull the next one each time you get a click. When you run out, you can repopulate the array if necessary.
Something like this (using the Shuffle method from this source):
Fiddle
var array = $(".hide div").toArray(); // Add all divs within the hide div to an array
var randomArray = Shuffle(array); // Shuffle the array
$("a").click(function() {
if (randomArray.length > 0)
alert(randomArray.shift().innerHTML); // Show contents of div, as an example
else
alert("None left!");
return false;
});
The solution below works by passing an array of elements to a function. As each div is displayed it is taken out of the array. Then from the divs left in the array the next one is picked at random.
// call this function on page load
function begin( ) {
var arr = $(".hide div").toArray();
// further elements can be added to arr i.e. last-div
showDivs( arr.length, arr );
}
// begin displaying divs
function showDivs( numberOfDivs, divArray ) {
var i, lastDiv;
function nextDiv( ) {
// depending on number of slides left get random number
i = randomInt( numberOfDivs );
if( lastDiv ) { $(lastDiv).hide() };
$( divArray[ i ] ).fadeIn( 3000 );
// now that this div has been displayed
// remove from array and cache
lastDiv = divArray.splice( i, 1 );
numberOfDivs--;
// no more divs to display
if( numberOfDivs == 0 ) { return };
setTimeout( nextDiv, 4000);
}
setTimeout( nextDiv, 1000);
}
// calculate next random index
function randomInt( divsLeft ) {
var i = Math.random() * divsLeft;
return Math.round( i );
}
Fiddle here
var checkduplicates = new Array();
drawOne(i);
//console.log(checkduplicates)
function drawOne(i)
{
//randomly select one photo
var picinfo = photos[Math.floor(Math.random()*photos.length)];
//check duplicates pic, if duplicates exist, get another one
while(checkduplicates.indexOf(picinfo)!=-1||picinfo.title.length>10)
{
picinfo = photos[Math.floor(Math.random()*photos.length)];
}
checkduplicates.push(picinfo);
var ctx = document.getElementsByClassName("canvas")[i].getContext('2d');
var img = new Image();
//get the pic URL
img.src = "http://farm" + picinfo.farm + ".static.flickr.com/"
+ picinfo.server + "/" + picinfo.id + "_" + picinfo.secret + "_m.jpg";
img.onload = function()
{
// Draw pieces
ctx.drawImage(img,0,0,132,150);
ctx.drawImage(frame,0,0,133,152);
if(picinfo.title=="")
$("#"+i).append("Untitled");
else
$("#"+i).append(picinfo.title);
i++;
if (i != canvaslength)
{
drawOne(i);
}
}
What I am doing here is that I am dynamically generate pictures to fill out 16 canvas and some people said that I am using asynchronous recursion which I dont even notice. I have tried to use loop instead of recursion but somehow ended it up getting exception that i dont know how to fix. So I stick to recursion. However, my problem is that how I can detect the end of the recursion like the commented line shows there is only one item in the array.
//console.log(checkduplicates)
and the explanation I got is that as I understand, the commented console.log is executed before a bunch of recursion of drawOne function finished But what I wanted was that I wanted the full 16 images to be fully loaded and then select them so that I can do something with them. Therefore, the question is how I can detect the end of the recursion. Thank you. You are welcomed to ignore most of my codes and just look at the recursion part.
This is not 'asynchronous recursion'. That would imply that at least two of these loops are running at the same time, and they return asynchronously. Which is simply not the case.
Basically the only time you STOP recursion is when i == canvaslength.
So, just take that if statement.
if (i != canvaslength)
{
drawOne(i);
}else{
console.log('recursion is done') // do what you want here.
}