Intro

Inside of this jQuery(document).ready() function, inside the anonymous function, I am throwing an error which gets caught inside of the second catch block. Then I am throwing an error inside of that catch block AND trying to catch it outside in the first try catch block.

Questions.

1. Is this possible? BROWSER CONSOLE says "UNCAUGHT."
2. If so, how is it possible?
3. Any other info would be greatly appreciated - Trying to wrap my head around this.

    try {
            // bind to ready
            jQuery(document).ready(function () {
                try {
                    throw Error("Can this be caught outside of this jquery callback?");
                    _this.initialize();
                } catch(e) {
                    console.log(e.message + ' Caught inside callback');
                    throw Error(e.message + ' Not caught outside');
                }

            });

        } catch(e) {
            //NEVER gets executed.
            console.log(e.message);
        } 
    

Intro

Inside of this jQuery(document).ready() function, inside the anonymous function, I am throwing an error which gets caught inside of the second catch block. Then I am throwing an error inside of that catch block AND trying to catch it outside in the first try catch block.

Questions.

1. Is this possible? BROWSER CONSOLE says "UNCAUGHT."
2. If so, how is it possible?
3. Any other info would be greatly appreciated - Trying to wrap my head around this.

    try {
            // bind to ready
            jQuery(document).ready(function () {
                try {
                    throw Error("Can this be caught outside of this jquery callback?");
                    _this.initialize();
                } catch(e) {
                    console.log(e.message + ' Caught inside callback');
                    throw Error(e.message + ' Not caught outside');
                }

            });

        } catch(e) {
            //NEVER gets executed.
            console.log(e.message);
        } 
    

• javascript
• try-catch

Share Improve this question Follow asked Jan 25, 2017 at 22:34 darga33darga33 40111 gold badge44 silver badges1010 bronze badges 6

• In jsfiddle/a3vttpk6, the "NEVER gets executed" clause does get executed. Is that not what you want? – Rick Hitchcock Commented Jan 25, 2017 at 22:40
• @RickHitchcock - was puzzled for a second there. Please, choose "Javascript - Load type - No wrap". – Igor Commented Jan 25, 2017 at 22:45
• @Igor, ahh! That does make a difference. – Rick Hitchcock Commented Jan 25, 2017 at 22:53
• @RichHitchcock - that is wierd because for me, in my development environment it does not get executed. But your jsfiddle executes that line and yet it's the same code. I am wondering if something else is causing it not to execute. Should I just accept this answer as correct? – darga33 Commented Jan 26, 2017 at 15:24
• @Igor - Igor, what should I do? – darga33 Commented Jan 26, 2017 at 15:26

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5

Event handlers for $(document).ready are executed asynchronously to the code that registers them - if the page is still loading, when the registration occurs. Your function() { ... throw ... } executes outside the outer try/catch block. What you are asking is not possible.

Explanation of behaviour observed by @RickHitchcock in https://jsfiddle/a3vttpk6/ (see first ment to the question)

If in Rick's fiddle you click on Javascript settings button, you will see that "LOAD TYPE" setting is "onLoad". This means that the whole js code in this window is wrapped in window.onload = function() { ... }. The consequence of this is - the immediate execution of $(document).ready handlers, because the page has already loaded. If you choose "no wrap" setting - you will see the behaviour described in the question.

let promise = new Promise((resolve, reject) => {
  jQuery(document).ready(() => {
    resolve('documentReady')
  });
})

promise.then((response) => {
  //run code here like you would in the ready callback
  throw Error("Can this be caught outside?");
}).catch(error => console.log(error, 'Caught you!'))

Leveraging promises, we can run a function after the document ready event fires. If there's an error, we can throw an error that the Promise catches. Should work just fine. While not technically catching an error from the ready callback, this has the same functionality.

To divorce it entirely, just assign a variable to promise.then() and reference it with .catch later.