How do I apply the 2nd paragraphs pStyle at earliest possible?

EDIT: I took a different approach where I break the content into 2 separate textframes. Not the solution I wanted, and isn't an answer to the question I posed, but it allows me to move on. I'm leaving it open as I would still like to know 'why' Headline pStyle that is set, will be reset by pStyle_body that is not applied to it in this scenario. endEdit.

I have a script that's stripped down to it's core parts of what I want to have. I seem to have isolated the core problem to how/when the paragraph rules gets implemented.

A textField with contents: first paragraph has Headline. Implemented the pStyle after (pStyle_headline) 2nd paragraph has a for loop (pStyle_body) that generates a simple list.

Problem: 2nd paragraph does not get get its pStyle applied until the end, hence it uses the pStyle_headline while in the for loop. When the tf.overflow becomes true, It causes the line tf.insertionPoints.item(-1).contents = SpecialCharacters.rightIndentTab; not to execute at that specific loop iteration, and after that point, apply the lines in reverse order.

The values for TF size and the leading/point size for both pStyle's will be dynamic. So I need to figure out how to apply the pStyle_body to the content in the for loop as it's being generated, so I will. know at what point it hits the tf.overflow with it's correct lineheight/pointSize applied.

When I try to add the pStyle_body inside the loop

if (i == 0) {
    parCount++;
    tf.paragraphs.item(parCount).applyParagraphStyle(pStyle_body, true);
}

It overwrites the headline as well, shifting all content upward, giving an incorrect reference of tf.overflow.

While if I apply the pStyle_body after the for loop is finished, the tf.overflow was applied to when it had the pStyle_headline, giving an incorrect reference again.

I've isolated the issue in a functional script here:

var testDoc = app.documents.add();
var testPage = app.activeWindow.activePage;

var pStyle_body = testDoc.paragraphStyles.add({
    name : "pStyle_body",
    pointSize : 12,
    underline : true,
});

var pStyle_headline = testDoc.paragraphStyles.add({
    name : "pStyle_headline",
    pointSize: 25,
    justification : Justification.CENTER_ALIGN,
});

var tf = testPage.textFrames.add();
tf.geometricBounds = [35, 35, 250, 575];
var paragraph = "\r";
var softBreak = "\n";
var parCount = 0;
var outsideTF = false;

// ============  content  ==============
tf.contents = "My headline";
tf.contents += paragraph;
tf.paragraphs.item(parCount).applyParagraphStyle(pStyle_headline, true);

// lines 
iterations = 20;

for(var i = 0; i < iterations; i++) {
    tf.contents += String(i);
    tf.insertionPoints.item(-1).contents = SpecialCharacters.rightIndentTab;
    if (i == 0)  {
        parCount++;
    //     tf.paragraphs.item(parCount).applyParagraphStyle(pStyle_body, true);
    }
    tf.contents += softBreak;
    
    // Tried to Swap softBreak for paragraph instead. Headline still changes.
    //tf.contents += paragraph;
    // parCount++;
    // var j = tf.paragraphs.length -1;
    // tf.paragraphs.item(j).applyParagraphStyle(pStyle_body, true);

    if(tf.overflows && outsideTF == false) {
        alert("we overflowed at iteration : " + i);
        outsideTF = true;
    }
}
tf.paragraphs.item(0).applyParagraphStyle(pStyle_headline, true);
tf.paragraphs.item(parCount).applyParagraphStyle(pStyle_body, true);

Edit : So if the headline pStyle (paragraph 1) does not have the correct height applied, the 2nd paragraphs starting height will not be correct. (Making any value The 'height information' of when tf.overflows is triggered.)

Solution

Not sure if I understand the goal of the script. So here is my guess:

var testDoc = app.documents.add();
var testPage = app.activeWindow.activePage;

var pStyle_body = testDoc.paragraphStyles.add({
    name : "pStyle_body",
    pointSize : 12,
    underline : true,
});

var pStyle_headline = testDoc.paragraphStyles.add({
    name : "pStyle_headline",
    pointSize: 25,
    justification : Justification.CENTER_ALIGN,
});

var tf = testPage.textFrames.add();
tf.geometricBounds = [35, 35, 250, 575];
var paragraph = "\r";
var softBreak = "\n";
var parCount = 0;
var outsideTF = false;

// ============  content  ==============
tf.contents = "My headline";
tf.contents += paragraph;
tf.contents += ' '; // <--- add the space at the end, to create the second pgf

tf.paragraphs.item(parCount).applyParagraphStyle(pStyle_headline, true);

// apply the style to second pgf
tf.paragraphs.item(1).applyParagraphStyle(pStyle_body, true); 

// lines
var iterations = 20;

for(var i = 0; i < iterations; i++) {
    // change contents of the second pfg, not contents of the tf
    tf.paragraphs.item(1).contents += String(i);
    tf.paragraphs.item(1).insertionPoints.item(-1).contents = SpecialCharacters.rightIndentTab;
    tf.paragraphs.item(1).contents += softBreak;

    if(tf.overflows && outsideTF == false) {
        alert("we overflowed at iteration : " + i);
        outsideTF = true;
    }
}

// remove the space at the start of the pgf
tf.paragraphs.item(1).characters[0].contents = '';

Output:

Probably there were several problems:

When you add '\r' to a paragraph it doesn't get you two paragraphs. You have to add any symbol after '\r'. A space for example. This way you get the second paragraph and then you can change its contents.
When you change contents of a text frame (tf.contents += ...) you reset all text styles for the texts in the frame. You have to change contents of a paragraph, not a text frame, if you want to keep the applied paragraph styles.
A text frame has Inserting points only within the text that fits into this text frame. For overflowed text it makes sense to use inserting points of the paragraph, not inserting points of a text frame.