Jump to content

Settimeout()...


Renegade605
 Share

Recommended Posts

I'm trying to build a script that sets the src of an image based on user input, and then waits for it to finish loading before extracting it's width and height. There is a problem with the setTimeout() function. This is the code I have so far:

function getImgDimensions(){	console.log("getImgDimensions()");	console.log(this);	var rownum = Number(this.getElementsByTagName('input')[0].name.substring(2,3))	var theimg = this.getElementsByTagName('img')[0];	console.log(theimg);	console.log("Completed? " +theimg.complete);	if (theimg.complete == true)	{		console.log("Img Completed!");		while ((theimg.width > 100) || (theimg.height > 100))		{			console.log("Img too big! (" +theimg.width +"x" +theimg.height +")");			theimg.width *= 0.95;			theimg.height *= 0.95;		}		console.log("Img fits! (" +theimg.width +"x" +theimg.height +")");				var txts = this.getElementsByTagName('input');		txts[0].value = Math.floor(theimg.width);		txts[1].value = Math.floor(theimg.height);	}	else { console.log("Img not complete, setting timeout..."); imgtimeout[rownum] = setTimeout("getImgDimensions.call(this)",1000); }	console.log("End getImgDimensions()");}

The function runs great up until the point where it's supposed to repeat. The console log is reflecting what it's supposed to. It says that the img isn't done loading therefore it needs to set the timeout. However, once the function executes again, it logs 'this'. Instead of being a <td> element like the first time, 'this' is set to 'Window index.php?act=UserCP&CODE=22' (that's what the console says). It then reports that 'this.getElementsByTagName' is not a function (I assume because 'this' is not set to the right kind of object).I also tried imgtimeout[rownum] = setTimeout("getImgDimensions.call(" +this +")",1000);Why is this happening, is there a problem using the call() method inside a setTimeout() function?

Link to comment
Share on other sites

First, you might be able to use an onload handler on the image to accomplish this instead.The issue isn't using function.call in the handler for setTimeout, it's what this is set to inside the handler. You may be able to use the call method on setTimeout to set the scope of its eval'ed code.setTimeout.call(this, "getImgDimensions.call(this)",1000);

Link to comment
Share on other sites

Using setTimeout.call() has caused an even bigger error the first time the function tried to execute:

uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "JS frame :: http://site.theunitedfrontclan.com/if_dynamicavatar.js :: getImgDimensions :: line 65" data: no] var rownum = Number(this.getElementsByTagName('input')[0].name.substring(2,3))
However, I didn't know that onload was a valid event for <img> elements, it's not on this page. Had I known that I would have done it that way from the beginning. I'll try it.
Link to comment
Share on other sites

Yeah, the w3schools references aren't exactly complete. ppk has a pretty good writeup on stuff like that:http://quirksmode.org/js/introevents.htmlIf you click the link on the left for navigation you can see the other pages.What is the console showing for this when that error shows up?

Link to comment
Share on other sites

It's set to a <td> element, like it was before.I've also tried the onload method, and it sort of works. The script gets, reduces, and sets the dimensions of the image as well as the form fields, but it has no effect to the page. The console logged the object that was 'theimg' and it looks like the right image, but when I click on it with Firebug it takes me to the HTML page and the img is within a table that is grayed out. It's like something made a copy of the entire table and hid it from view between the time that the image is appended to one of it's cells and the time the image is loaded.EDIT3: Never mind, I've figured that one out.I'm going to make another test account on the forums so you can log in and see it.EDIT: I've made the account. Go to http://z8.invisionfree.com/renegade_script_test/ and log in as test1 (Password: test) then go to this page. (Your control panel -> Personal Profile -> Edit Avatar Settings)EDIT2: I've also just noticed that the script doesn't execute at all in IE. It still works in FF though.

Edited by Renegade605
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...