We Keep Coding

Trying to reload Image variable until successful or a max amount of attempts is reached

I am trying to create a function that will recursively try to reload an image until it either is successful, or a maximum amount of attempts is reached. I have created this function, but it doesn't work (is it due to the fact that the reference to the image has changed?):
function reload (image, URL, maxAttempts)
{
image.onerror = image.onabort = null;
if (maxAttempts > 0)
{
var newImg = new Image ();
newImg.src = URL;
newImg.onerror = image.onabort = reload (image, URL, maxAttempts - 1);
newImg.onload = function () {
newImg.onerror = newImg.onabort = null;
image = newImg;
}
}
else
{
alert ("Error loading image " + URL); /* DEBUG */
}
}
Which is used in the following manner:
var globalTestImage = new Image ();
reload (globalTestImage, "testIMG.jpg", 4);
Rather than it attempting to load "testIMG.jpg" four times, and waiting in between attempts, it instead tries to load it twice, and regardless of whether it was successful the second time around it will display the error message.
What am I doing there? More precisely, why is it acting the way it is, rather than retrying to load the image 4 times?

(function ($) {
var retries = 5; //<--retries
$( document).ready(function(){
$('img').one('error', function() {
var $image = $(this);
$image.attr('alt', 'Still didn\'t load');
if (typeof $image !== 'undefined') {
if (typeof $image.attr('src') !== 'undefined') {
$image.attr('src', retryToLoadImage($image));
}
}
});
});
function retryToLoadImage($img) {
var $newImg = $('<img>');
var $src = ($img.attr('src')) || '';
$newImg.attr('src', $src);
$newImg.one('error', function() {
window.setTimeout(function(){
if (retries > 0) {
retries--;
retryToLoadImage($newImg);
}
}, 1000); //<-retry interval
});
$newImg.one('load', function() {
return $newImg.attr('src');
});
}
})(jQuery);
Some code I wrote for the same case a while ago. Hope it helps you!

In the end I solve this issue in a simple (if inelegant) way:
try
{
canvas.getContext("2d").drawImage (testImage, 0, 0);
backgroundLoaded = true;
}
catch (err)
{
testImage = new Image ();
testImage.src = "placeholder.jpg";
}
The idea is that if an image failed to load, it will fail when rendering it on the canvas, producing an error. When such an error happens, we can create a new image and try again.

inserting a .on(load) timeout

I'm attempting to load some images dynamically via .on('load') - via the following script:
.on('load', function() {
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
alert('broken image!');
} else {
$("#rateholder").append(img);
}
});
Sometimes, however, the attempt fails for some reason or other. I'd like to put a timeout on it so if the image hasn't loaded within say...10 seconds...it runs a different function.
How would I append a timeout to this?

You can create a function that checks your image exists every 10 seconds.
Then do what you need if it doesn't.
var oneSecond = 1000;
var checkExist = setInterval(function() {
if ($('#the-image').length) {
console.log("Exists!");
clearInterval(checkExist);
}
else{
console.log('Does not Exist');
clearInterval(checkExist);
}
}, oneSecond*10);

JavaScript Loop doesn't exit

I've tried everything I can think of.
I'm building a sort of chat bot for IMVU, using injected JavaScript on the IMVU mobile website. I have a loop to crawl the messages received, and search for certain key terms, like a message beginning with a slash (/) to indicate a command to the bot.
When certain commands are used, I have a problem that the bot seems to get stuck in the loop, almost as if the index of the for loop is being modified inside the loop. The code is included below.
If you need more, ask, and if you find something that might be causing the problem, please let me know. I'm at my wit's end.
Just for a note: jQuery is properly injected, all my variables are there, no errors in the debug console, and running under Chrome 41.0.2272.101m on Windows 7 x64.
function verifyCommand() {
if (document.getElementsByClassName("message-list-item").length > last_cmd_count && !processing_commands) {
var new_length = $('.message-list .message-list-item').length;
console.log("Begin processing commands... ** SYSTEM LOCK **");
console.log(new_length);
for (var i = last_cmd_count; i < (new_length); i++) {
processing_commands = true;
try {
var callinguser = $('.message-list .message-list-item .header .username .username-text')[i].innerText.replace("Guest_", "");
var messagetext = $('.message-list .message-list-item .message .message-text')[i].innerText
if (callinguser != "USERNAME REMOVED") {
if (messagetext.substr(0, 1) == "/") {
if (strContains(callinguser, "IMVU User")) {
die();
}
processCommand(messagetext.substr(1), callinguser);
} else {
if (messagetext.toLowerCase().indexOf('roomgreet') > -1 || messagetext.toLowerCase().indexOf('room greet') > -1) {
if (detectFlirt()) {
sendMsgRaw('Please do not hit on me, ' + callinguser + '.');
if (!isAdmin(callinguser)) {
logIdiot(callinguser);
}
} else if (strContains(messagetext, 'what is ')) {
sendMsgRaw('Please use /solve or /advsolve for math.');
} else {
if (callinguser != "USERNAME REMOVED") {
ident();
}
}
}
if (strContains(messagetext, 'free') && strContains(messagetext, 'credits') && strContains(messagetext, 'http://')) {
sendMsgFrom("*** SCAM ALERT ***", callinguser);
}
}
}
} catch (ex) {} finally {}
}
processing_commands = false;
last_cmd_count = new_length;
console.log("Finish processing commands... ** SYSTEM FREE **");
if (monitoring) {
verifyUserMessageCount();
}
}
}
HTML of the IMVU Mobile messages can be found at http://common.snftech.tk/imvu/roomgreet-html-sample.htm

Try changing your function to use each() to loop through each element instead of the loop you have. Once an element has been processed, add a "processed" class to the element so we dont look at them again later. This should be more stable than forcing our logic to keep up with what ones have been processed already.
Here is a jsFiddle,, throw in the html from your page that actually causes the problem and see if it still occurs
function verifyCommand() {
//fixed some logic in here
if ($(".message-list-item").length > last_cmd_count && !processing_commands) {
processing_commands = true; // you should set this immediately
var new_length = $('.message-list-item').length;
console.log("Begin processing commands... ** SYSTEM LOCK **");
console.log('Last command count: '+ last_cmd_count +', New Length: '+new_length);
var newMessages = $('.message-list-item:not(.processed)'); // get all of the message elements that do not have the class "processed"
// loop through each of the message elements
newMessages.each(function(index, element){
console.log('Processing new element at index '+index );
try {
var callinguser = $(this).find('.username-text').text().replace("Guest_", "");
var messagetext = $(this).find('.message-text').text();
$(this).addClass('processed'); // add processed class to the element so we know not to process it again later
if (callinguser != "RoomGreet") {
if (messagetext.match(/^\//)) {
if (callinguser.match(/IMVU User/)) {
die();
}
processCommand(messagetext.substr(1), callinguser);
}
else {
if (detectFlirt(messagetext)) {
if (!isAdmin(callinguser)) {
sendMsgRaw('Please do not hit on me, ' + callinguser + '.');
logIdiot(callinguser);
}
}
else if (messagetext.match('what is ')) {
sendMsgRaw('Please use /solve or /advsolve for math.');
}
else {
if (callinguser != "Nezzle" && !isAdmin(callinguser)) {
ident();
}
}
if (strContains(messagetext,"imvu") && strContains(messagetext,"credits") && strContains(messagetext,"http://")) {
sendMsgFrom("*** SCAM ALERT ***", callinguser);
}
}
}
}
catch (ex) {
console.log('caught error');
}
finally {
}
});
last_cmd_count = new_length;
console.log("Finish processing commands... ** SYSTEM FREE **");
processing_commands = false;
if (monitoring) {
verifyUserMessageCount();
}
}
}

I think your problem is this
if (messagetext.substr(0,1) == "/") {
if the user has a space in front of the "/" then it will not interpret as a command so you need to process
var messagetext = $('.message-list .message-list-item .message .message-text')[i].innerText
remove all white space from message text like this
messagetext.text().replace(" ", "");
you should also have more error catching in
if (messagetext.substr(0,1) == "/") {

Infinite scroll repeatition of same ids

Following is my function which I am using to load data as per < last id of li .post-list but still I am getting repetition of same ids that were pulled before. Kindly let me know how can I resolve this issue so the old ids doesn't load/repeat itself again.:
function loadData()
{
$('div.postloader').html('<img src="img/loader.gif">');
$.post("getData.php?lastID=" + $(".post-list:last").attr("id"),
function(data){
if (data != "") {
$(".post-list:last").after(data);
}
$('div.postloader').empty();
});
};

A possible soution to prevent this is to store the last ID in a global variable in JS and increment that, so you don't have to rely on selecting the right element to find the ID to POST.

you're pulling the data from the server too fast, try adding a flag that will prevent pulling the items while the request is running:
var flagPulling = false;
function loadData() {
if( flagPulling ) {
return;
}
flagPulling = true;
$('div.postloader').html('<img src="http://www.zesteve.com/img/loader.gif">');
$.post("/getData.php?lastID=" + $(".post-list:last").attr("id"), function(data){
if (data != "") {
$(".post-list:last").after(data);
}
$('div.postloader').empty();
flagPulling = false;
});
};

Trying to keep track of number of outstanding AJAX requests in firefox

I am using Selenium to test a web application and am not allowed to modify the application's javascript code. I am trying to track the number of outstanding AJAX requests by using GreaseMonkey to override XMLHttpRequest.send. The new send() will basically wrap what was set as the onreadystatechange callback, check the readyState, incrementing or decrementing the counter as appropriate, and calling the original callback function.
The problem that I'm having appears to be a privilege issue because if I just browse to a page in a normal firefox browser, open firebug and paste in the following code, it seems to work fine:
document.ajax_outstanding = 0;
if (typeof XMLHttpRequest.prototype.oldsend != 'function') {
XMLHttpRequest.prototype.oldsend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {
console.log('in new send');
console.log('this.onreadystatechange = ' + this.onreadystatechange);
this.oldonreadystatechange = this.onreadystatechange;
this.onreadystatechange = function() {
if (this.readyState == 2) {
/* LOADED */
document.ajax_outstanding++;
console.log('set ajax_outstanding to ' + document.ajax_outstanding);
}
this.oldonreadystatechange.handleEvent.apply(this, arguments);
if (this.readyState == 4) {
/* COMPLETED */
document.ajax_outstanding--;
console.log('set ajax_outstanding to ' + document.ajax_outstanding);
}
};
this.oldsend.apply(this, arguments);
};
}
Now if I use a slightly modified version of that snippet from within a GreaseMonkey user script like so:
unsafeWindow.document.ajax_outstanding = 0;
if (typeof unsafeWindow.XMLHttpRequest.prototype.oldsend != 'function') {
unsafeWindow.XMLHttpRequest.prototype.oldsend = unsafeWindow.XMLHttpRequest.prototype.send;
unsafeWindow.XMLHttpRequest.prototype.send = function() {
GM_log('in new send');
GM_log('this.onreadystatechange = ' + this.onreadystatechange);
this.oldonreadystatechange = this.onreadystatechange;
this.onreadystatechange = function() {
if (this.readyState == 2) {
/* LOADED */
unsafeWindow.document.ajax_outstanding++;
GM_log('set ajax_outstanding to ' + unsafeWindow.document.ajax_outstanding);
}
this.oldonreadystatechange.handleEvent.apply(this, arguments);
if (this.readyState == 4) {
/* COMPLETED */
unsafeWindow.document.ajax_outstanding--;
GM_log('set ajax_outstanding to ' + unsafeWindow.document.ajax_outstanding);
}
};
this.oldsend.apply(this, arguments);
};
}
and I go to a page, do something that causes an AJAX request, I get the following message in the javascript error console:
http://www.blah.com/gmscripts/overrides: in new send
uncaught exception: [Exception... "Illegal value" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: file:///tmp/customProfileDir41e7266f56734c97a2ca02b1f7f528e1/extensions/%7Be4a8a97b-f2ed-450b-b12d-ee082ba24781%7D/components/greasemonkey.js :: anonymous :: line 372" data: no]
So it appears to be throwing the exception when trying to access this.onreadystatechange
Presumably, this is due to the sandboxed environment.
Any help would be greatly appreciated. I am not tied to this solution, so any other suggestions for doing what I need are welcome. It's just that I've tried several others and this seems to be the most promising. The requirement is that I need to make sure that the counter gets to 0 after the readyState goes to 4 and the onreadystatechange callback has finished execution.

I've made something myself: http://jsfiddle.net/rudiedirkx/skp28agx/ (updated 22 Jan 2015)
The script (should run before anything else):
(function(xhr) {
xhr.active = 0;
var pt = xhr.prototype;
var _send = pt.send;
pt.send = function() {
xhr.active++;
this.addEventListener('readystatechange', function(e) {
if ( this.readyState == 4 ) {
setTimeout(function() {
xhr.active--;
}, 1);
}
});
_send.apply(this, arguments);
}
})(XMLHttpRequest);
And the jsFiddle's test script:
window.onload = function() {
var btn = document.querySelector('button'),
active = btn.querySelector('span');
btn.onclick = function() {
// jQuery for easy ajax. `delay` is a jsFiddle argument
// to keep some requests active longer.
jQuery.post('/echo/json/', {
delay: Math.random() * 3,
});
};
updateActive();
function updateActive() {
active.textContent = XMLHttpRequest.active;
requestAnimationFrame(updateActive);
}
};
It updates the counter in the button every animation frame (~ 60 times per second), separate from the AJAX requests. Whatever you do, however fast and much you click it, the counter should always end up at 0 after a few seconds.

I ended up using the following:
unsafeWindow.document.ajax_outstanding = 0;
if (typeof unsafeWindow.XMLHttpRequest.prototype.oldsend != 'function') {
unsafeWindow.XMLHttpRequest.prototype.oldsend = unsafeWindow.XMLHttpRequest.prototype.send;
unsafeWindow.XMLHttpRequest.prototype.send = function() {
unsafeWindow.XMLHttpRequest.prototype.oldsend.apply(this, arguments);
this.addEventListener('readystatechange', function() {
if (this.readyState == 2) {
/* LOADED */
unsafeWindow.document.ajax_outstanding++;
console.log('set ajax_outstanding to ' + unsafeWindow.document.ajax_outstanding);
} else if (this.readyState == 4) {
/* COMPLETED */
unsafeWindow.document.ajax_outstanding--;
console.log('set ajax_outstanding to ' + unsafeWindow.document.ajax_outstanding);
}
}, false);
};
}