Action Function In VisualForce Page

Here is an example how to use   in visualforce page. In this example we will create account by using action function then update it asynchronously.

1). You have to create a Visualforce page by using following code.

<apex:page controller="exampleJs" tabstyle="Account">
<!-- 
    /**
     * Webkul Software.
     *
     * @category  Webkul
     * @author    Webkul
     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
     * @license   https://store.webkul.com/license.html
     */
 -->	   
 <style>
        .progressBar
        {
        width: 0;
        height : 13px;
        border : grey;
        background : green;
        }
        .loading{
        Display: none;
        position:Absolute;
        top:-2px;
        left:-2px;
        width:100%;
        height:100%;
        background:black;
        opacity: .5;
        border:0;
        }
        
        .loadingMessage
        {
        Display: none;
        position:fixed;
        width:100px;
        height:30px;
        padding:10px 5px;
        top:50%;
        Left:50%;
        margin-top:-25px;
        margin-left:-60px;
        background:#ffffff;
        border:3px solid #ffba1a;
        Color:#222222;
        font-size:12px;
        font-weight:bold;
        }
    </style>
    <script>
    var i = 0;
    var j = 0;
    function load()
    {
        document.getElementById("wholeLoad").style.display="Block";
        document.getElementById("lodMsg").style.display="Block";
        return false; 
    }
    function color()
    {
        
        if(i<10)
        {
            j += 10;
            document.getElementById("progressBar").style.width = j+'%' ; 
            i++;
        }
            
    }
    </script>
    <apex:form >
        <apex:actionFunction action="{!createAccount}" name="createRecordJS"  status="createStatus" oncomplete="updateAccount();" />
        <apex:actionFunction action="{!updateAccount}" name="updateAccount" status="wsStatus"  oncomplete="color(),createRecordJS();"/>
        <apex:outputPanel id="statuses">
            <div class="loading" id="wholeLoad"/>
            <div class="loadingMessage" id="lodMsg">
                <div class="progressBar" id = "progressBar">
                    
                </div>
                Processing....
            </div>
            
        </apex:outputPanel>
        <apex:outputPanel id="msgs">
            <apex:pageMessages />
        </apex:outputPanel>
        <div><input name="CreateAndCall" class="btn" type="button" value="Create And Update !!!" onclick="load(),createRecordJS();return false;"/></div>
    </apex:form>
</apex:page>

2).  Create apex class say exampleJs and write following code.

public with sharing class exampleJs {
  /**
    * Webkul Software.
    *
    * @category  Webkul
    * @author    Webkul
    * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
    * @license   https://store.webkul.com/license.html
    */
  
    Account myAccount;
    integer i =0;
    //Creates an account record.
    public PageReference createAccount() {
        //Create an account using DML operation.
        if(i<10){
            myAccount = new Account(name = 'Webkul Software Pvt. Ltd.');
            insert myAccount;
            i++;
            return null;
        }  else {
            pageReference pg =page.remoteAction;
            pg.setRedirect(true);
            return pg;
        }
       
    }
    
    public PageReference updateAccount() {
       // Update the same account record  
        myAccount.Name = 'Webkul After Update';
        update myAccount; 
        return null;
    }
    
}