I hope I'm not missing something obvious here.
function renderViews(containerId) {
var root = '../Views/';
var viewsDomStr = '';
for (var i = 0; i < bundles.views.length; i++) {
$.get(root + bundles.views[i], function (data) {
viewsDomStr = viewsDomStr.concat(data);
});
}
console.log(viewsDomStr);
$('#' + containerId).append(viewsDomStr);
}
The problem is that the viewsDomStr is updated according to data from server only inside the for loop. For console.log(viewsDomStr); all I get is a reset to ''.
The function you are calling is asynchron.
Try with
function renderViews(containerId) {
var root = '../Views/';
var viewsDomStr = '';
function cb(){
console.log(viewsDomStr);
$('#' + containerId).append(viewsDomStr);
}
for (var i = 0; i < bundles.views.length; i++) {
$.get(root + bundles.views[i], function (data) {
viewsDomStr = viewsDomStr.concat(data);
cb();
});
}
}
The problem is the $.get request is asynchronous so the program continues on and doesn't wait for it. You want to use viewsDomStr inside the $.get function.
function renderViews(containerId) {
var root = '../Views/';
for (var i = 0; i < bundles.views.length; i++) {
$.get(root + bundles.views[i], function (data) {
console.log(data);
$('#' + containerId).append(data);
});
}
// This section runs before $.get is finished
}
EDIT: I've found that viewsDomStr is actually redundant. You are just adding text to the element so you can just add it to the $.get.
Since get method sends asynchronous request, you can check response every 1 sec using setInterval:
function renderViews(containerId) {
var root = '../Views/';
var viewsDomStr = '';
var success = false;
for (var i = 0; i < bundles.views.length; i++) {
$.get(root + bundles.views[i], function (data) {
viewsDomStr = viewsDomStr.concat(data);
success = true;
});
}
var t = setInterval(function(){
if(success) {
console.log(viewsDomStr);
$('#' + containerId).append(viewsDomStr);
clearInterval(t);
}
},1000);
}
The anonymous function of the get method will be asynchronous (as per the execution of get itself).
In short, it all happens too fast.
Related
Okay, so basically all I wrote this script to do is clear and click a button if the textbox is full and refresh the page if its not.
I can successfully clear the text box when its full and refresh the page when its not, but as soon as I try to use my clickButton function it kicks into an infinite loop and skips the if() in clrLog
function addFunction(func, exec) {
var script = document.createElement('script');
script.textContent = '-' + func + (exec ? '()' : '');
document.body.appendChild(script);
document.body.removeChild(script);
}
function clickButton(val) {
buttons = document.getElementsByTagName('INPUT');
for (var i = 0; i < buttons.length; i++)
{
if (buttons[i].type == 'submit' && buttons[i].value == val)
{
buttons[i].click();
}
}
}
function clrLog() {
var elements = [
];
elements = document.getElementsByClassName('logarea');
if (elements.log.value === '')
setTimeout(function () {
location.reload();
}, 5000);
for (var i = 0; i < elements.length; i++) {
elements[i].value = '';
}
clickButton('Edit log file');
}
function main() {
addFunction(clrLog(), true);
}
main();
I found out that I could avoid using a for loop by using document.querySelector(); instead - so much easier :)
I want to make a delay inside my for loop, but it won't really work.
I've already tried my ways that are on stackoverflow, but just none of them work for what I want.
This is what I've got right now:
var iframeTimeout;
var _length = $scope.iframes.src.length;
for (var i = 0; i < _length; i++) {
// create a closure to preserve the value of "i"
(function (i) {
$scope.iframeVideo = false;
$scope.iframes.current = $scope.iframes.src[i];
$timeout(function () {
if ((i + 1) == $scope.iframes.src.length) {
$interval.cancel(iframeInterval);
/*Change to the right animation class*/
$rootScope.classess = {
pageClass: 'nextSlide'
}
currentId++;
/*More information about resetLoop at the function itself*/
resetLoop();
} else {
i++;
$scope.iframes.current = $scope.iframes.src[i];
}
}, $scope.iframes.durationValue[i]);
}(i));
}
alert("done");
This is what I want:
First of all I got an object that holds src, duration and durationValue.
I want to play both video's that I have in my object.
I check how many video's I've got
I make iframeVideo visible (ngHide)
I insert the right <iframe> tag into my div container
It starts the $timeout with the right duration value
If that's done, do the same if there is another video. When it was the last video it should fire some code.
I hope it's all clear.
I've also tried this:
var iframeInterval;
var i = 0;
$scope.iframeVideo = false;
$scope.iframes.current = $scope.iframes.src[i];
iframeInterval = $interval(function () {
if ((i + 1) == $scope.iframes.src.length) {
$interval.cancel(iframeInterval);
/*Change to the right animation class*/
$rootScope.classess = {
pageClass: 'nextSlide'
}
currentId++;
/*More information about resetLoop at the function itself*/
resetLoop();
} else {
i++;
$scope.iframes.current = $scope.iframes.src[i];
}
}, $scope.iframes.durationValue[i])
Each $timeout returns a different promise. To properly cancel them, you need to save everyone of them.
This example schedules several subsequent actions starting at time zero.
var vm = $scope;
vm.playList = []
vm.playList.push({name:"video1", duration:1200});
vm.playList.push({name:"video2", duration:1300});
vm.playList.push({name:"video3", duration:1400});
vm.playList.push({name:"video4", duration:1500});
vm.watchingList=[];
var timeoutPromiseList = [];
vm.isPlaying = false;
vm.start = function() {
console.log("start");
//ignore if already playing
if (vm.isPlaying) return;
//otherwise
vm.isPlaying = true;
var time = 0;
for (var i = 0; i < vm.playList.length; i++) {
//IIFE closure
(function (i,time) {
console.log(time);
var item = vm.playList[i];
var p = $timeout(function(){playItem(item)}, time);
//push each promise to list
timeoutPromiseList.push(p);
})(i,time);
time += vm.playList[i].duration;
}
console.log(time);
var lastPromise = $timeout(function(){vm.stop()}, time);
//push last promise
timeoutPromiseList.push(lastPromise);
};
Then to stop, cancel all of the $timeout promises.
vm.stop = function() {
console.log("stop");
for (i=0; i<timeoutPromiseList.length; i++) {
$timeout.cancel(timeoutPromiseList[i]);
}
timeoutPromiseList = [];
vm.isPlaying = false;
};
The DEMO on PLNKR.
$timeout returns promise. You can built a recursive chain of promises like this, so every next video will play after a small amount of time.
I am using google maps and i am trying to put a pause in execution to prevent QUERY_LIMIT usage issue. My function that plots the addresses looks like this.
The code works, however i want to try setTimeout or setInterval to see if its going to look better on UI.
How do i call it, what should be the first argument?
Thanx alot.
vLocations = [];
for (var i = 0; i < vAddresses.length; i++) {
//pause to prevent OVER_QUERY_LIMIT issue
//geocode "free" usage limit is 5 requests per second
//setTimeout(PlotAddressesAsUnAssigned, 1000);
//sleep(500);
//this will resolve the address and store it in vLocations
AddWaypointAndUnassigned(vAddresses[i]);
var z = i % 4;
if (z==0 && i != 0) {
//sleep after every 5th geocode call
//alert('going to sleep...i: ' + i);
//sleep(3000);
}
}
Doing a pause (asynchronous execution) inside a loop (synchronous) will usually result in a lot of trouble.
You can use recursive calls that are done only when a timeout ends.
var vLocations = [];
// Manages the timeout and recursive calls
function AddWaypointAndUnassignedWithPause(index){
setTimeout(function(){
// When the timeout expires, we process the data, and start the next timeout
AddWaypointAndUnassigned(vAddresses[index]);
// Some other code you want to execute
var z = i % 4;
if (z==0 && i != 0) {
//sleep after every 5th geocode call
//alert('going to sleep...i: ' + i);
//sleep(3000);
}
if(index < vAddresses.length-1)
AddWaypointAndUnassignedWithPause(++index);
}, 1000);
}
// Start the loop
AddWaypointAndUnassignedWithPause(0);
JSFiddle example.
Try this, hope this will help
vLocations = [];
for (var i = 0; i < vAddresses.length; i++) {
//pause to prevent OVER_QUERY_LIMIT issue
setTimeout(function(){
//this will resolve the address and store it in vLocations
AddWaypointAndUnassigned(vAddresses[i]);
}, 500);
var z = i % 4;
if (z==0 && i != 0) {
//sleep after every 5th geocode call
//alert('going to sleep...i: ' + i);
//sleep(3000);
}
}
What about a waiting line, thats fired when an item is added and stopped when there are no items left.
With setTimeout:
var INTERVAL = 1000 / 5;
var to = null;
var vLocations = [];
function addAddress(vAddress) {
vLocations.push(vAddress);
startTimeout();
}
function startTimeout() {
if( to === null ) {
to = setTimout(processLocation, INTERVAL);
}
}
function processLocation() {
if( vLocations.length ) {
var vAddress = vLocations.shift();
AddWaypointAndUnassigned(vAddress);
to = setTimout(processLocation, INTERVAL);
} else {
to = null;
}
}
With setInterval:
var INTERVAL = 1000 / 5;
var to = null;
var vLocations = [];
function addAddress(vAddress) {
vLocations.push(vAddress);
startInterval();
}
function startInterval() {
if( to === null ) {
to = setInterval(processLocation, INTERVAL);
}
}
function processLocation(cb) {
if( vLocations.length ) {
var vAddress = vLocations.shift();
AddWaypointAndUnassigned(vAddress);
} else
clearInterval(to);
to = null;
}
}
I have a trouble while using a javascript function in a while loop.My function executes only once.Given below is the code.
I called a function inside a while loop.That called function calls an another function.
I want to execute the first function till the end of while loop,But it executes only once.
Thanks in advance.
while(p<=10)
{
k=0;
l=0;
var contExp= mycontents[p].split("#");
var divExp= mydivs[p].split(",");
var schtime=contExp[k];
alert(contExp[k]);
document.getElementById('gymlocationz').value=contExp[k+1];
document.getElementById('fitness').value=contExp[k+2];
document.getElementById('duration').value="1 hour";
alert(p);
return select_visibility(divExp[l],divExp[l+1],divExp[l+2],contExp[k],mycontents[p]);
//l=l+3;
p++;
}
function select_visibility(str,str1,timeid,time,cont)
{
var contExp= cont.split("#");
var e = document.getElementById(str);
var esub=document.getElementById(str+'sub');
var fulldv=str+'sub';
var result = timeid.match(/([0-9]+)/g);
$('#'+str1).addClass('act');
$('#'+str+'sub').addClass('act');
document.getElementById(timeid).value=time;
document.getElementById('fitness'+result).value=document.getElementById('fitness').value;
document.getElementById('gymlocat'+result).value=document.getElementById('gymlocationz').value;
document.getElementById('selectdrpact'+result).value=contExp[3];
document.getElementById('repeat'+result).value=contExp[4];
var s=document.getElementById('fitness'+result).value;
$("#"+str).css(
{
"background-color":"#95c5ec",
"border":"1px solid #ddd",
"text-decoration":"none",
"padding":"10px 0px",
"margin-left":"30px"
});
$("#"+fulldv).css(
{
"background-color":"#95c5ec",
"border":"1px solid #ddd",
"text-decoration":"none",
"padding":"10px 0px",
"margin-left":"41px"
});
e.style.display = 'block';
esub.style.display = 'block';
selecteditems();
//return true;
}
function selecteditems()
{
var i=1;
var fld = "";
document.getElementById("showselecteditems").innerHTML="";
while(i<=53)
{
fldOne = document.getElementById('datepicker_value').value;
fld = document.getElementById('timedrpact'+i).value;
fidpartnum = document.getElementById('selectdrpact'+i).value;
fidrepeat = document.getElementById('repeat'+i).value;
fit=document.getElementById('fitness'+i).value;
if(fit=="Select")
{
fit="Fitness Not Selected";
}
if(fld!="")
{
//var par='ddwnx'+i;
//alert(fit+","+i+","+fld);
var ele = document.createElement("div");
ele.setAttribute("id","showselecteditems"+i);
ele.setAttribute("class","inner");
ele.innerHTML=fit+" , "+fldOne+" , "+fld+" , "+fidpartnum+" Paticipants, "+fidrepeat+" Repeat";
}
i++;
}
}
You are using a return statement inside your while loop. The return statement will cause the function to stop running and return a value to whatever code called the function. The problem is this line:
return select_visibility(divExp[l],divExp[l+1],divExp[l+2],contExp[k],
mycontents[p]);
Change it to this:
select_visibility(divExp[l],divExp[l+1],divExp[l+2],contExp[k],mycontents[p]);
That will call the select_visibility() function without causing the function containing the loop to terminate.
I am building a jQuery search suggestion script based upon two Google API's. Each API outputs a "relevance" integer (which I am returning next to each item to demonstrate) and I want to be able to order the results by that integer for each item.
How can I do this? I tried making the script output everything into one variable but I couldn't quite work it out.
A working demo can be seen here: http://jsfiddle.net/rEPf3/
My jQuery code is:
$(document).ready(function(){
$("#search").keyup(function(){
$.getJSON("http://suggestqueries.google.com/complete/search?q="+$("#search").val()+"&client=chrome&callback=?",function(data){
var suggestion="";
for(var key in data[1]){
if(data[4]["google:suggesttype"][key]=="NAVIGATION"){
suggestion+="<li><a href='"+data[1][key]+"'>"+data[2][key]+"</a> <i>("+data[4]["google:suggestrelevance"][key]+")</i></li>";
}else{
suggestion+="<li>"+data[1][key]+" <i>("+data[4]["google:suggestrelevance"][key]+")</i></li>";
}
}
$("#suggest").html(suggestion);
});
$.getJSON("https://www.googleapis.com/freebase/v1/search?query="+$("#search").val()+"&limit=3&encode=html&callback=?",function(data){
var suggestion2="";
for(var key in data.result){
suggestion2+="<li>"+data.result[key].name+" <i>("+data.result[key].score*4+")</i></li>";
}
$("#suggest2").html(suggestion2);
});
});
});
I think the cleanest way is to push the results from each dataset into an externally scoped variable, then sort and render from that. Example is below.
var combined = [],
completed = 0;
$(document).ready(function () {
$("#search").keyup(function () {
combined = [];
completed = 0;
$.getJSON("http://suggestqueries.google.com/complete/search?q=" + $("#search").val() + "&client=chrome&callback=?", function (data) {
for (var key in data[1]) {
if (data[4]["google:suggesttype"][key] == "NAVIGATION") {
combined.push({
href : data[1][key],
text : data[2][key],
score : parseInt(data[4]["google:suggestrelevance"][key],10)
});
} else {
combined.push({
text : data[1][key],
score : parseInt(data[4]["google:suggestrelevance"][key],10)
});
}
}
if ( ++completed == 2 ) complete();
});
$.getJSON("https://www.googleapis.com/freebase/v1/search?query=" + $("#search").val() + "&limit=3&encode=html&callback=?", function (data) {
for (var key in data.result) {
combined.push({
text : data.result[key].name,
score : parseInt(data.result[key].score,10) * 14
});
}
if ( ++completed == 2 ) complete();
});
});
});
function complete(){
console.log(combined);
combined.sort(function(a,b){ return b.score - a.score; });
var buffer = [];
combined.forEach(function(result){
buffer.push("<li>"+result.text+" <i>("+result.score+")</i></li>")
})
$("#suggest").html(buffer.join(""));
}
Edit
This solution doesn't take into account the fact that the user may be typing at a faster pace than the APIs, that API calls may not come back in order, and doesn't do anything to try to limit the number of calls made to each API. To make this behave more consistently (and more efficiently):
Change the keypress handler such that each key press cancels any previous timeouts then sets a new timeout at a reasonable delay (300ms seems a reasonable place to start) which then triggers the API calls
Wrap each API call in an immediately executed function so that you can reference the value of a global counter at the time each API call was made. Increment the counter with each keypress, and don't process the response from API calls where the counter didn't match
Here is the full code for you, you have to append all the results to one container and sort in .ajaxComplete event
$(document).ready(function () {
$("#search").keyup(function () {
$("#suggest").empty();
$.getJSON("http://suggestqueries.google.com/complete/search?q=" + $("#search").val() + "&client=chrome&callback=?", function (data) {
var suggestion = "";
for (var key in data[1]) {
if (data[4]["google:suggesttype"][key] == "NAVIGATION") {
suggestion += "<li><a href='" + data[1][key] + "'>" + data[2][key] + "</a> <i>(" + data[4]["google:suggestrelevance"][key] + ")</i></li>";
} else {
suggestion += "<li>" + data[1][key] + " <i>(" + data[4]["google:suggestrelevance"][key] + ")</i></li>";
}
}
$("#suggest").append(suggestion);
});
$.getJSON("https://www.googleapis.com/freebase/v1/search?query=" + $("#search").val() + "&limit=3&encode=html&callback=?", function (data) {
var suggestion2 = "";
for (var key in data.result) {
suggestion2 += "<li>" + data.result[key].name + " <i>(" + data.result[key].score * 4 + ")</i></li>";
}
$("#suggest").append(suggestion2);
});
$(document).ajaxComplete(function (event, xhr, settings) {
$("#suggest").html($("#suggest li").sort(function (a, b) {
return (parseInt($(a).find("i").html(), 10) > parseInt($(b).find("i").html(), 10));
}));
});
});
});
http://jsfiddle.net/rEPf3/8/
Try like this
Add this line before to the for loop
data[4]["google:suggestrelevance"].sort();
See Demo
Updated
Try combining the data sets by using a single variable
See Demo
Put them together and sort.
Following is the code.
Using promise to know both ajax requests are completed.
$(document).ready(function(){
$("#search").keyup(function(){
var mergedData = [];
var promise1 = $.getJSON("http://suggestqueries.google.com/complete/search?q="+$("#search").val()+"&client=chrome&callback=?",function(data){
var suggestion="";
console.log(data);
var arr = [];
for(var i in data[1]){
arr[i] = {value : data[1][i], rel : data[4]['google:suggestrelevance'][i]};
}
$.extend(mergedData,arr);
arr.sort(function(a, b){
return (b['rel']-a['rel']);
});
});
var promise2 = $.getJSON("https://www.googleapis.com/freebase/v1/search?query="+$("#search").val()+"&limit=3&encode=html&callback=?",function(data){
console.log('data of second request', data);
var suggestion2="";
var arr = [];
for(var key in data.result){
arr[key] = {value : data.result[key].name, rel : data.result[key].score};
}
$.extend(mergedData,arr);
$("#suggest2").html(suggestion2);
});
$.when(promise1, promise2).then(function(){
mergedData.sort(function(a, b){
return (b['rel']-a['rel']);
});
var suggestion = '';
for(var key in mergedData){
suggestion+='<li>' + mergedData[key].value + ' ' + mergedData[key].rel + '</li>';
}
$("#suggest").html(suggestion);
});
});
});
Updated working jsfiddle : http://jsfiddle.net/rEPf3/13/