Many time in our web-site, we used to put a waiting timer for user to wait to take any further action.This timer can be written in JavaScript or in JQuery. The drawback of the writing the timer in JavaScript is that it is not secure. Anyone can override the timer by executing the javascript from browser's address bar. So to overcome this situation we need to synchronize the timer with the server.
Consider the code for the JavaScript Timer written below
Consider the code for the JavaScript Timer written below
<html>
<head>
<script type="text/javascript">
var waitTime = 90;
function startJSTimer() {
try {
setInterval(function () {
if(waitTime>0){
waitTime = waitTime - 1;
document.getElementById("timer_count_js").innerHTML = waitTime;
}
else{
return false;
}
}, 1000);
}
catch (ex) {
alert('Error');
}
}
</script>
</head>
<body>
<div id="timer_blockjs" style="border-color: Black;" title="JavaScript Timer">
<div class="content">
<div>
seconds</div>
<div id="Div2">
<span id="timer_count_js">90</span>
</div>
<div class="text">
<a href="#" id="start_timer_js" onclick="startJSTimer();">Start timer</a></div>
</div>
</div>
</body></html>
In the above html code the timer is written in Javascript which can easily be changed by executing the following javascript from Address Bar..
javascript:function A(){waitTime=1;} A();
So this is not a good idea to write timer in Java Script.
To overcome this problem, either we have to synchronize the timer with server or we can write the timer with JQuery.
Example of Timer with JQuery
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var file_link = '',
timer_active = false,
timer_count = 0,
timer_block = $('#timer_block'),
button_start_timer = $('#start_timer');
function timer() {
$('#timer_count').html(timer_count);
if (timer_count > 0) {
setTimeout(function () { timer(); }, 1000);
timer_count -= 1;
}
else {
timer_end(true);
}
}
function start_timer(wait_time) {
if (timer_active) return;
timer_count = wait_time;
timer();
timer_active = true;
}
function timer_end(go) {
//timer_block.hide();
}
setTimeout(function(){
button_start_timer.click(function(e){
start_timer(90);
});
}, 1000);
});
</script>
</head>
<body>
<div class="timer_block" id="timer_block" style="border-color:Black" title="JQuery Timer">
<div class="splash"></div>
<div class="content">
<div class="title">seconds</div>
<div class="time_loading" id="time_loading">
<span id="timer_count">90</span>
</div>
<div class="text"><a id="start_timer" href="#">Start timer</a></div>
</div>
</div>
</body>
</html>
The above timer written in the JQuery cannot be overridden because the variable timer_count. is declared in the $(document).ready(...) so it will be unaccessible to the outer environment so it can't be changed by the method being executed from the browser's address bar.
No comments:
Post a Comment