Async Javascript causes JS error function does not exist

Question

I have a jQuery script that I added an ASYNC attribute to. It seems to work OK in Firefox, but intermittently fails in Chrome and IE.

The PHP for loading adding the async attrib. This works fine:

function add_async_attribute($tag, $handle) {
   if ( substr($handle,0,3) !== 'jch' )
      return $tag;
   return str_replace( ' src', ' async="async" src', $tag );
 }

 add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

The JS file that causes a problem with the ASYNC attrib:

jQuery(document).ready(function($) {    
    jQuery('.home #intro_reel').jchTextReel( {fadeTime: 16000} );       
});

jQuery.fn.extend({

    jchTextReel: function(options) {                
        var defaults = {
                fadeTime: 10000,
                mouseOverColor : '#000000',
                mouseOutColor : '#ffffff'
        }

        var options =  jQuery.extend(defaults, options);

          return this.each(function() {
          var o = options;      

          ....etc....

Chrome shows an error 'jchTextReel is not a function'.

Again, removing the ASYNC attrib makes the script work OK again. OR, if I hit F5 to reload, the script seems to work.

Why? How do I fix?

Sufian Saory · Accepted Answer · 2016-09-21 17:19:26Z

1

your file is being loaded asynchronously. when it is loaded, document ready is already triggered. that's why your top document ready is being executed immediately and calling jchTextReel which is not defined yet. to resolve it you need to first define jchTextReel then put the call. it seems firefox is ignoring async and loading the file synchronously but ie & chrome honoring async.

answered Sep 21, 2016 at 17:19

Sufian Saory

8929 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dave Romsey · Accepted Answer · 2016-09-16 19:54:09Z

0

async and defer are two separate boolean attributes. Doing async="defer" will set async to true, but defer is not set, so my guess is that sometimes the script is executing too soon. Here is a tweaked version of add_async_attribute() with distinct async and defer attributes:

function add_async_attribute($tag, $handle) {
    if ( substr($handle,0,3) !== 'jch' )
        return $tag;
    return str_replace( ' src', ' async defer src', $tag );
}

add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

Also, it's not shown in the original code posted, but the script that is being run uses jQuery, so jquery should be specified as a dependency for that script.

answered Sep 16, 2016 at 19:54

Dave Romsey

5387 silver badges21 bronze badges

3 Comments

jchwebdev Over a year ago

I made a TERRIBLE mistake in my code example. Please see the corrected version. It should have read 'async="async"' Sorry.

jchwebdev Over a year ago

I tried your solution and no joy. Changing the return string to 'defer' does work, though.

Dave Romsey Over a year ago

That's okay. From what I've gathered, it's best to reserve the use of async for third party scripts due to the increased likelihood of dependency issues. So I'd drop it, and if these scripts are already in the footer (which is not clear from the code posted), defer is unnecessary as well.

Alex Kudryashev · Accepted Answer · 2016-09-16 20:56:21Z

0

In your case two approaches are possible.
1. Add async="async" and put jQuery('.home #intro_reel').jchTextReel( {fadeTime: 16000} ); to the end of your file (.js)
2. Load the script from .ready handler. async attribute is not required in this case.

$(document).ready(function($) {  
    $.getScript('path/to/script', function(){
       jQuery('.home #intro_reel').jchTextReel( {fadeTime: 16000} ); 
    });
});

answered Sep 16, 2016 at 20:56

Alex Kudryashev

9,5103 gold badges31 silver badges39 bronze badges

Collectives™ on Stack Overflow

Async Javascript causes JS error function does not exist

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related