Well, I found that using it as a jQuery plugin made it a lot slower, especially when there are other ajax calls it seems to stall until the call has finished and then starts again, so it doesn't keep the correct time. I've learned quite a few things of jQuery but I'm no plugin guru yet so perhaps I've designed something wrong which is limiting the performance. Here is my code:
/* Sets time in clock div and calls itself every second */
/**
* Clock plugin
* Dual licensed under the MIT and GPL licenses:
*
* Turns a jQuery dom element into a dynamic clock
*
* @timestamp defaults to clients current time
* $("#mydiv").clock();
* >> will turn div into clock using client computer's current time
* @timestamp server-side example:
* Say we have a hidden input with id='timestmp' the value of which is determined server-side with server's current time
* $("#mydiv").clock({"timestamp":$("#timestmp").val()});
* >> will turn div into clock passing in server's current time as retrieved from hidden input
*
* @format defaults to 12 hour format,
* or if langSet is indicated defaults to most appropriate format for that langSet
* $("#mydiv").clock(); >> will have 12 hour format
* $("#mydiv").clock({"langSet":"it"}); >> will have 24 hour format
* $("#mydiv").clock({"langSet":"en"}); >> will have 12 hour format
* $("#mydiv").clock({"langSet":"en","format":"24"}); >> will have military style 24 hour format
*
*/
(function($, undefined) {
$.clock = { version: "1.0.0", locale: {} };
$.fn.clock = function(options) {
this.locale = {
"it":{
"weekdays":["Domenica","Lunedì","Martedì","Mercoledì","Giovedì","Venerdì","Sabato"],
"months":["Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio","Agosto","Settembre","Ottobre","Novembre","Dicembre"]
},
"en":{
"weekdays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
"months":["January","February","March","April","May","June","July","August","September","October","November","December"]
},
"es":{
"weekdays":["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
"months":["Enero", "Febrero", "Marzo", "Abril", "May", "junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
},
"de":{
"weekdays":["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
"months":["Januar", "Februar", "März", "April", "könnte", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
},
"fr":{
"weekdays":["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
"months":["Janvier", "Février", "Mars", "Avril", "May", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"]
},
"ru":{
"weekdays":["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"],
"months":["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"]
}
}
$.extend(this.locale,$.clock.locale);
return this.each(function(){
options = options || {};
/* if(options=="stop"){ $(this).updateClock($(this),"stop"); } */ // haven't yet figured out how to access a handler on the setTimeout function from within the jQuery plugin code...
if(options.timestamp!=undefined){
mytimestamp = options.timestamp;
mytimestamp = new Date(options.timestamp);
}
else{ mytimestamp = new Date(); }
options.langSet = options.langSet || "en";
options.format = options.format || (options.langSet!="en") ? "24" : "12";
options.timestamp += 1000;
var addleadingzero = function(i){
if (i<10){i="0" + i;}
return i;
},
h=mytimestamp.getHours(),
m=mytimestamp.getMinutes(),
s=mytimestamp.getSeconds(),
dy=mytimestamp.getDay(),
dt=mytimestamp.getDate(),
mo=mytimestamp.getMonth(),
y=mytimestamp.getFullYear(),
ap="";
if(options.format=="12"){
ap=" AM";
if (h > 11) { ap = " PM"; }
if (h > 12) { h = h - 12; }
if (h == 0) { h = 12; }
}
if(options.langSet=="en"&&options.format=="12"){
if(s==0&&m==0&&h==12){ $("div#currentdate").html(this.locale[langSet].weekdays[dy]+', '+this.locale[langset].months[mo]+' '+dt+', '+y); } // todo: if clock includes date, then update at midnight, but create dynamically the html for the calendar and for the clock from within the plugin code instead of depending on an already existing div to hold the date...
}
if(options.langSet=="en"&&options.format=="24"){
if(s==0&&m==0&&h==0){ $("div#currentdate").html(this.locale[langSet].weekdays[dy]+', '+this.locale[langset].months[mo]+' '+dt+', '+y); } // todo: if clock includes date, then update at midnight, but create dynamically the html for the calendar and for the clock from within the plugin code instead of depending on an already existing div to hold the date...
}
else{
if(options.format=="24"){
if(s==0&&m==0&&h==0){ $("div#currentdate").html(this.locale[langSet].weekdays[dy]+', '+dt+' '+this.locale[langSet].months[mo]+' '+y); } // todo: if clock includes date, then update at midnight, but create dynamically the html for the calendar and for the clock from within the plugin code instead of depending on an already existing div to hold the date...
}
else{
if(s==0&&m==0&&h==12){ $("div#currentdate").html(this.locale[langSet].weekdays[dy]+', '+dt+' '+this.locale[langSet].months[mo]+' '+y); } // todo: if clock includes date, then update at midnight, but create dynamically the html for the calendar and for the clock from within the plugin code instead of depending on an already existing div to hold the date...
}
}
// add a zero in front of numbers 0-9
h=addleadingzero(h);
m=addleadingzero(m);
s=addleadingzero(s);
$(this).html(h+":"+m+":"+s+ap);
$(this).updateClock($(this),{"timestamp":options.timestamp,"langSet":options.langSet,"format":options.format});
});
}
$.fn.updateClock = function(el,myoptions) {
/* if(myoptions=="stop"){ clearTimeout(t); } else { */ // can't quite seem to work out the handler code
t = setTimeout(function() {$(el).clock(myoptions)}, 1000);
/* } */
}
return this;
})(jQuery);
Am I not handling the setTimeout correctly in a jQuery format? Why are other ajax calls affecting performance?
John R. D'Orazio