happymishra/issueWithoutDeThro.html

## issueWithoutDeThro.html
<html>
    <body>
        <label>Search</label>
        <!-- Renders an HTML input box -->
        <input type="text" id="search-box" oninput="makeAPICall()">

        <!-- Displays number of time makeAPICall method is called -->
        <p id='show-api-call-count'></p>
    </body>

    <script>
        function makeAPICall() {
            var searchBoxDom = document.getElementById('search-box');
            var searchBoxValue = searchBoxDom.value;
            var apiCallCountDom = document.getElementById('show-api-call-count');

            var apiCallCount = apiCallCountDom.innerHTML || 0;
            apiCallCount = parseInt(apiCallCount) + 1;

            // Updates the number of times makeAPICall method is called
            apiCallCountDom.innerHTML = apiCallCount;

            // A very heavy fucntion which hits databases to fetch data
            apiCall()


        }

        function apiCall() {
           // This represent an API call which makes database hits
            for(var i = 0; i < 1000000; i++) {

            }
        }
    </script>
</html>
	<html>
	<body>
	<label>Search</label>
	<!-- Renders an HTML input box -->
	<input type="text" id="search-box" oninput="makeAPICall()">

	<!-- Displays number of time makeAPICall method is called -->
	<p id='show-api-call-count'></p>
	</body>

	<script>
	function makeAPICall() {
	var searchBoxDom = document.getElementById('search-box');
	var searchBoxValue = searchBoxDom.value;
	var apiCallCountDom = document.getElementById('show-api-call-count');

	var apiCallCount = apiCallCountDom.innerHTML \|\| 0;
	apiCallCount = parseInt(apiCallCount) + 1;

	// Updates the number of times makeAPICall method is called
	apiCallCountDom.innerHTML = apiCallCount;

	// A very heavy fucntion which hits databases to fetch data
	apiCall()


	}

	function apiCall() {
	// This represent an API call which makes database hits
	for(var i = 0; i < 1000000; i++) {

	}
	}
	</script>
	</html>