<style>
#number{height: 50px; color: #000; }
</style>
Progress: <div id="number"> </div>
<script type="text/javascript">
var i = 0;
d = 1;
function increment(d) {
if(i<100){
i+=d;
document.getElementById('number').innerHTML = i + '%';
}
else{
document.getElementById('number').innerHTML = 'done' ;
}
}
setInterval('increment(d)', 1000);
</script>
<button type="button" id="button" onclick="d++">Add</button>
<button type="button" onclick="window.location.reload()">Refresh</button>
i'm currently working on a web app with visual studio on asp.net mvc 4. i need to make a partial view that shows a counter that goes from 1 to 100. i added a button that increases by 1 the counter value on every click and another one for refreshing the page. how can i do this using ajax?
AJAX (Asynchronous Javascript and XML) is for making web requests without visible page refreshes. That is not what you should be using this for. You can do this using setTimeout
. I have provided a JSFiddle for you to use.
The important bits
In Javascript, you can simulate asynchronous functionality using setTimeout
. This function will allow the Javascript to continue executing, and after a given waiting period, will execute the code you provide.
function doSomething() { alert("hello"); }
setTimeout(doSomething, 1000);
This will execute the doSomething()
method.
NOTE: You pass the function as a callback. As in doSomething
and not doSomething()
.