a4j:commandLink vs a4j:jsFunction in JSF

Question

In JSF, Button Action click operation can be performed by below 2 working ways. BUT Second method doesn't roload/ accept latest page values during operation.

Does anyone have idea difference between two method in terms of usage/flow.

Method 1:

<a4j:commandLink id="linkSearch" action="#{SupplyOperation.applySearch}"
         reRender="dataRslt, searchVals" onclick="if (!searchOnClick()) return false;"
          oncomplete="searchOnComplete();" ajaxSingle="false" ignoreDupResponses="true">
            <span>Apply</span>
</a4j:commandLink>

Method 2:

    <span id="btnSearch">
                    <input type="button" onclick="applyBtn();" value="Apply" width="55" />                                        
 </s:span>
            ...     
function applyBtn(){
        linkSearch();        
 }
    .......

<a4j:jsFunction name="linkSearch" action="#{SupplyOperation.applySearch}" 
         reRender="dataRslt, searchVals" onclick="if (!searchOnClick()) return false;" 
         bypassUpdates="false" oncomplete="searchOnComplete();" ajaxSingle="false" immediate="true" ignoreDupResponses="true"/>