Object not yet loaded while running the function

In one of the frame, I have the following JS code to change the head.

However, the 'resultcharc' is 'undefined', I guess at the time it runs the code, the object is still not yet loaded.

I tried these methods, all failed.esultcharcto resultc

1. setTimeout(changeHead, 5000);

2. setInterval(changeHead, 5000);

3. document.addEventListener('DOMContentLoaded',changeHead.bind(this));

l.resultcharcresult

ult.resultcreeuelet.resultc

function changeHead() {
switch (parent.p1.classes){
case "basic":
this.start_result.resultcharb.gotoAndStop(parent.p1.head);
console.log("go to resultcharb");
break;
case "middle":
this.start_result.resultcharc.gotoAndStop(parent.p1.head);
console.log("go to resultcharc");
break;
}
}
changeHead();

But if I use click mehtod to trigger it, it works.

this.start_result.addEventListener('click', changeHead.bind(this));
function changeHead() {
   
switch (parent.p1.classes){
case "basic":
this.start_result.resultcharb.gotoAndStop(parent.p1.head);
console.log("go to resultcharb");
break;
case "middle":
this.start_result.resultcharc.gotoAndStop(parent.p1.head);
console.log("go to resultcharc");
break;
}
}

How can I fix it, so when the frame is loaded, the changeHead function can successfully run?