2317 8/14/2015 12:03:06 AM

Example:

:
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
:
<input class="actionButton" type="button" value="Reload Animation" onclick="javascript:refreshAll();" /><div class="resultContainer"></div>
<div class="debug">
        <ul class="trace"></ul>
</div>

<div class="col-xs-12"> We have added time delay in program to show you how it behaves in different senarios.</div>
:
var numberArray = [];
        var incCounter = 1;
        var toggle = 1;
        var innerMax = 100;
        var scale = 5;
        var stop = 0;
        $(document).ready(function () {
            refreshAll_Task();
        });
        function refreshAll() {
            refreshAll_Task();
            setTimeout(function () {
            }, 500);
        }
        function refreshAll_Task() {
            var i = 0;var j = 0;
            numberArray = [];
            incCounter = 1;
            toggle = 1;
            innerMax = 100;
            scale = 5;
            $('.resultContainer').empty();
            for (i = innerMax; i >= 1; i -= scale) {
                numberArray.push(i);
            }
            insertionSort(numberArray, 1, 'Reverse', new Date());

            numberArray = [];
            for (i = scale; i <= innerMax; i += scale) {
                if (toggle == 1) {
                    numberArray.push(i);
                } else {
                    numberArray.push(i - (scale + 5));
                }
                toggle = toggle * -1;
            }
            numberArray.push(innerMax);

            insertionSort(numberArray, 1, 'Nearly-Sorted', new Date());
            numberArray = [];
            scale = 10;
            for (j = 0; j < (incCounter); j += 1) {
                for (i = innerMax; i >= 1; i -= scale) {
                    numberArray.push(i * toggle);
                }
                for (i = scale; i <= 100; i += scale) {
                    numberArray.push(i * toggle);
                }
            }

            insertionSort(numberArray, 1, 'Few-Unique', new Date());

            numberArray = [];
            scale = 5;
            for (i = innerMax; i >= 1; i -= scale) {
                numberArray.push(Math.random() * 100);
            }
            insertionSort(numberArray, 1, 'Random', new Date());
        }

        function insertionSort(numberArray, current, placeholder, startDateTime) {
            setTimeout(function () {
                if (stop == 0 && current < numberArray.length) {
                    insertionSortInnerLoop(numberArray, current, current, placeholder, startDateTime);
                } else {
                    printArray(numberArray, current, current, placeholder, startDateTime);
                }
            }, 500);
        }

        function insertionSortInnerLoop(numberArray, currentParent, currentInner, placeholder, startDateTime) {
            setTimeout(function () {
                if (stop == 0 && currentInner > 0 && numberArray[currentInner] < numberArray[currentInner - 1]) {
                    printArray(numberArray, currentParent, currentInner, placeholder, startDateTime);
                    var currentValue = numberArray[currentInner];
                    numberArray[currentInner] = numberArray[currentInner - 1];
                    numberArray[currentInner - 1] = currentValue;
                    currentInner--;
                    insertionSortInnerLoop(numberArray, currentParent, currentInner, placeholder, startDateTime);
                } else {
                    currentParent++;
                    insertionSort(numberArray, currentParent, placeholder, startDateTime);
                }
            }, 50);
        }

        function printArray(numberArray, currentParent, currentInner, placeholder, startDateTime) {
            if (currentParent == 1) {
                if (!$('.' + placeholder).length) {
                    $('.resultContainer').append($('<div class="mySrc col-xs-6 col-md-6">').append($("<ul>").addClass(placeholder)));
                }
            }
            $('.' + placeholder).empty();
            var totalTime = " (Time-" + (new Date() - startDateTime) / 1000 + ' Sec)';
            $('.' + placeholder).append($("<li style='height:30px;width:100%;background:none;'>").addClass("title").text(placeholder + totalTime));
            $.each(numberArray, function (index, value) {
                if (index == currentParent + 1 && index != (numberArray.length - 1)) {
                    $('.' + placeholder).append($("<li>").addClass("myCurrent").width(value + '%').text(''));
                } else if (index == currentInner + 1 && index != (numberArray.length - 1)) {
                    $('.' + placeholder).append($("<li>").addClass("myCurrentValue1").width(value + '%').text(''));
                } else if (index < currentParent + 1) {
                    $('.' + placeholder).append($("<li>").addClass("mySorted").width(value + '%').text(''));
                } else {
                    $('.' + placeholder).append($("<li>").removeClass("myCurrent").removeClass("myCurrentValue").width(value + '%').text(''));
                }
            });
        }
:
:
.mySrc ul
        {
            list-style-type: none;
            background-color: #ff0;
            min-width: 200px;
            padding: 10px;
            border: 1px solid green;
        }
        .mySrc li
        {
            background-color: gray;
            margin: 1px;
            height: 3px;
        }
        .mySrc ul .title
        {
            color: #ff4500;
            height: 20px;
            border-bottom: 2px solid blue;
            width: 100%;
            background: none;
            margin-bottom: 15px;
        }
        .myResult
        {
            list-style-type: none;
        }
        .mySrc .mySorted
        {
            background-color: black;
        }
        .mySrc .myCurrent
        {
            background-color: red;
        }
        .mySrc .myCurrentValue
        {
            background-color: #fff;
        }
: