How to Run Javascript after KnockoutJS has rendered all elements in a page magento 2?

Magento uses knockout js at many places in the code. You can see Checkout page data render using knockout js in Magento 2. To custom requirement, You need to execute some javascript code after knockout js load completely.

If you are using require([“jquery”, “domReady!”], function($){} function or jQuery(window).load() function, Using this way mostly your custom javascript code execute before the knockout element render.

How to prevent custom javascript code execute before knockout element render in Magento 2?

In Knockout js, there is one function called afterRender.
afterRender is executed after a knockout associated element is inserted into the DOM.

Let’s simple demo for afterRender function.
Simple HTML Dom element,

<div class="ko-concetp">
    <span data-bind="afterRender: loadJsAfterKoRender"></span>
</div>

Here we have to define afterRender in the data-bind syntax for used in a knockout.
loadJsAfterKoRender is the function which we need to call after knockout render completely,

Now create a function in the js file,

loadJsAfterKoRender: function(){
    // CUSTOM_JS_CODE_EXECUTE_AFTER_KO_LOAD
}

You can create custom code in above function and they will execute after ko render completed.