setTimeout(f,0) equivalent? why does it solve cross-browser issues?

Question

The following method:

Init: function (selector, settings)
{
    setTimeout(function()
    {
        var s =
        {
            width: '100%',
            script_url: '/Content/Scripts/tiny_mce/tiny_mce.js',
            theme: "advanced",
            plugins: "autolink,lists,pagebreak,style,layer,table,paste,directionality,noneditable,visualchars,xhtmlxtras,template",
            theme_advanced_buttons1: "fontselect,fontsizeselect,|,bold,italic,underline,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist",
            theme_advanced_buttons2: "",
            theme_advanced_buttons3: "",
            theme_advanced_buttons4: "",
            theme_advanced_more_colors: false,
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_statusbar_location: "none",
            theme_advanced_resizing: false,
            convert_urls: !!$(selector).data("richEditor-ConvertUrls") // by default we don't convert urls
        };
        $.extend(s, settings);
        $(selector).tinymce(s);
    },0);
}

works on all browsers, for some reason, I need the setTimeout(f,0) call for firefox, this method is called on an ajax partial load on MVC, without this call, the editor hangs on firefox and the page breaks (clicking on stuff results on exceptions most often than not). with the call, everything works perfectly.

I was wondering how I could avoid this setTimeout call (through some other workaround), and if that wasn't an option I would like to know why.

I'm scared this might not be the cleanest solution for this case.

Does your ajax callback update your page with contents? This might be firing before the DOM has been updated. If that's the case I think you could use jQuerys ready event to wait for the DOM to finish before applying tinymce to the `$(selector)`. — JesseBuesking, Dec 14 '11 at 16:14
it does update the DOM, but this also does execute within `$(f(){});` — bevacqua, Dec 14 '11 at 16:16
Is there a reason you're declaring `s` inside of the timeout and not outside of the Init method (aside from posting it here). Also is there a way you can recreate this issue in jsfiddle? That'd make it easier for me to try and help out. — JesseBuesking, Dec 14 '11 at 16:26
No reason. No difference either way, I'll try to create a fiddle for this. — bevacqua, Dec 14 '11 at 16:34
see here a similar question http://stackoverflow.com/questions/779379/why-does-settimeoutfn-0-sometimes-help — Irishka, Dec 14 '11 at 17:47
I've read that, I'm looking for an alternative or a reason why there wouldn't be one. That and a reason why this only happens in Firefox... — bevacqua, Dec 14 '11 at 17:48
the reason why is answered in that question, if you are doing DOM manipulation after your document is loaded - it results in the same browser behavior - it can't access the element if your manipulation is not yet done; "...I have seen it occur on older versions of Mozilla and in FireFox." — Irishka, Dec 14 '11 at 17:55
the alternative is to use $.when().then() see http://api.jquery.com/jQuery.when/ — Irishka, Dec 14 '11 at 17:58

score 0 · Accepted Answer · answered Dec 14 '11 at 18:17

This is bound to be a timing issue. Does anything else happen on DOMContentLoaded, maybe tinyMCE or another script also runs things on that event? Or a script is loaded which executes a document.write()?

Probably executing this function on load makes the issues go away. If that's the case than you have to figure out whats happening at the time the problems occur, maybe do a profile session in Firebug.

setTimeout(f,0) equivalent? why does it solve cross-browser issues?

1 Answers1