I'm trying to integrate a script file hosted by a third party into a new web site.

Currently, I'm adding a SCRIPT tag to the DOM for that third-party script file on document ready:

$(document).ready( function() {

    var extScript = document.createElement('script');
        extScript.type = 'text/javascript';
        extScript.src = 'http://third-party.com/scriptfile.js';

    $('head').append(extScript);

});

function extScriptCallback() {
    $('#extWidgetContainer').show();
}

But sometimes that third-party script file request times out or takes a long time to respond.

So, for the sake of best practice, I want to provide alternative content if the external script takes longer than e.g. 10 seconds to load.

How do I achieve this? I've looked at JavaScript's native setTimeout(), as well as jQuery's delay() function, but I'm not sure which I should use--or how.

Grateful for any suggestions.