Recursive helper function throws component.get is not a function

Question

I have a recursive helper function that checks every 5 seconds for the status of a queueable job.

Upon the first recursive call, the helper method throws Uncaught Error in $A.getCallback() [component.get is not a function]

The helper function:

checkUploadStatus: function(component, event, helper, jobId, cdId) {
    let action = component.get('c.checkUploadJobStatus');
    action.setParams({'jobId': jobId, 'cdId': cdId});
    action.setCallback(this, function(response) {
        let state = response.getState();
        if (state === "SUCCESS") {
            let returnVal = response.getReturnValue();
            console.log('returnVal', returnVal);
            if (returnVal === null) {
                window.setTimeout(
                    $A.getCallback(helper.checkUploadStatus.bind(component, helper, jobId, cdId)),
                    5000
                );
            } else {
                // do work
            }
        } else {
            // handle error
        }
    })
    $A.enqueueAction(action);
}

How come component is not recognized?

Answer 1

You can simply move it to callback logic, no need to bind, arrow functions make this easier.

action.setCallback(this, (response) => {
            if (response.getState() === "SUCCESS") {
                    setTimeout(
                        $A.getCallback(() => {
                            this.checkUploadStatus(comp, event, helper);
                        }),1);
            }
        });

Notice two changes,

1. setCallback to arrow function so this inside still refers to helper.
2. getCallback, bind to a comparatively simpler call with arrow functions.

Answer 2

The first element to bind sets the this context:

$A.getCallback(helper.checkUploadStatus.bind(this, component, helper, jobId, cdId);

Since the first parameter was the component, it became this, and your helper became component, etc.