Utilisez les événements !

Exemple n° 4

1000 ms 1500 ms 2000 ms 2500 ms 3000 ms 3500 ms 4000 ms Afficher

$(function(){
	
	// l'utilisateur peut appeler plusieurs fois le programme, mais il ne doit y avoir qu'un objet « contrôleur »
	var objTotal = null;
	
	// l'utilisateur crée et initialise l'objet « contrôleur » en cliquant sur le bouton « Afficher »
	// l'objet « contrôleur » se charge du bon fonctionnement du programme et de l'affichage des résultats
	// l'affichage des résultats nécessite le plugin jquery.tablesorter.min.js et la feuille de style trierTable.css
	$("#btn").click(function(){
		
		if (objTotal != null) {
			objTotal = null;
		}
		
		objTotal = new Total($("#choix").val(), "affiche");
	});
});

Le fichier testEvent4Modele.js contient les objets Pair et Impair :

(function($){
    Pair = function(){
        this.number = 0;
    }
    
    Pair.prototype = {
        add:function(obj){
            this.number++;
            
            if ((this.number % 2 == 0) &&
                (obj != null) && (obj != undefined) && 
                (obj.eventName != null) && (obj.eventName != undefined)){
                    
                var objEvent = new $.Event(obj.eventName);
                
                objEvent.dvjh = {
                    length:1,
                    p1Name:"Pair",
                    p1Data:this.number
                };
                
                $(obj).trigger(objEvent);
            }
        }
    };
    
    Impair = function(){
        this.number = 0;
    }
    
    Impair.prototype = {
        add:function(obj){
            this.number++;
            
            if ((this.number % 2 != 0) &&
                (obj != null) && (obj != undefined) && 
                (obj.eventName != null) && (obj.eventName != undefined)){
                    
                var objEvent = new $.Event(obj.eventName);
                
                objEvent.dvjh = {
                    length:1,
                    p1Name:"Impair",
                    p1Data:this.number
                };
                
                $(obj).trigger(objEvent);
            }
        }
    };
})(jQuery);

Le fichier testEvent4Vue.js contient l'objet Table (il construit une table, triable avec le plugin jquery.tablesorter.min.js et la feuille de style trierTable.css) :

(function($){
    Table = function(){
        this.eventName = "tableEvent.Table";
        this.th = null;
        this.trs = new Array();
        
        this.init();
    }
    
    Table.prototype = {
        init:function(){
            var self = this; // bonne pratique car jQuery peut modifier this
            $(this).bind(self.eventName, self.afficherEventHandler);
        },
        afficherEventHandler:function(event){
            if ((event.dvjh != null) && (event.dvjh != undefined) && (event.dvjh.length == 1)){
            
                if (this.th == null) {
                    this.th = event.dvjh.p1Name;
                }
                
                this.trs.push(event.dvjh.p1Data);
            }
                            
            return false;
        },
        print:function(id){
            if (this.th != null && this.trs[0] != null){
                var self = this; // bonne pratique car jQuery peut modifier this
                
                var t0 = this.trs[0][3];
                var tableID = "vue" + t0;
                var deltaT = new Array();
                
                deltaT.push(0);
                
                for(var i = 1; i < this.trs.length; i++){
                    deltaT.push(this.trs[i][3] - t0);
                }
                
                // suppprime une éventuelle table précédente
                $("#"+id).find(".tablesorter").remove();
                
                var elClone = $("#"+id).clone(true);
                    
                    var tdlength = this.th.length;
                    var trlength = this.trs.length;
                    
                    var table = $("<table id='" + tableID + "' class='tablesorter'></table>").appendTo(elClone);
                    
                    var thead = $("<thead></thead>").appendTo(table);
                    var tfoot = $("<tfoot></tfoot>").appendTo(table);
                    var tbody = $("<tbody></tbody>").appendTo(table);
                    
                    var trhead = $("<tr></tr>").appendTo(thead);
                    var trfoot = $("<tr></tr>").appendTo(tfoot);
                    
                    for(var i = 0; i < tdlength; i++) {
                        $("<th>" + self.th[i] + "</th>").appendTo(trhead);
                        $("<th>" + self.th[i] + "</th>").appendTo(trfoot);
                    }
                    
                    $("<th>Delta T ms</th>").appendTo(trhead);
                    $("<th>Delta T ms</th>").appendTo(trfoot);
                   
                    var trbody = null;
                    
                    for(var j = 0; j < trlength; j++) {
                        trbody = $("<tr></tr>").appendTo(tbody);
                        
                        for(var i = 0; i < tdlength; i++) {
                            $("<td>" + self.trs[j][i] + "</td>").appendTo(trbody);
                        }
                        
                        $("<td>" + deltaT[j] + "</td>").appendTo(trbody);
                    }
                    
                $("#"+id).replaceWith(elClone);
                
                $("#"+tableID).tablesorter({
                    sortList: [[3,0]],
                    widgets: ['zebra'],
                    headers: { 
                        4:{sorter: false}
                    }
                });
            } else {
                $("#"+id).html("<p>Il n'y a aucune information à afficher !</p>");
            }
        }
    };
})(jQuery);

Le fichier testEvent4Controleur.js contient l'objet Total (l'objet chargé de l'exécution du programme) :

(function($){
    Total = function(millisecondes, divID){
        this.eventName = "totalEvent.Total";
        this.number = 0;
        this.source = "";
        this.total = 0;
        this.timeStamp = 0;
        this.output = new Table();
        this.pair = new Pair();
        this.impair = new Impair();
        
        this.init(millisecondes, divID);
    }
    
    Total.prototype = {
        init:function(milliseconds, divID){
            var t = milliseconds || 1000;				
            var self = this; // bonne pratique car jQuery peut modifier this
            
            $(this).bind(self.eventName, self.totalEventHandler);
            
            // window.setInterval et window.setTimeout modifient this
            
            var pairInterval  = window.setInterval(function(){
                self.pair.add(self);
            }, 30);
            
            var impairInterval = window.setInterval(function(){
                self.impair.add(self);
            }, 40);
            
            window.setTimeout(function(){
                window.clearInterval(pairInterval);
                window.clearInterval(impairInterval);
                self.output.print(divID);
            }, t);
            
        },
        totalEventHandler:function(event){
            if ((event.dvjh != null) && (event.dvjh != undefined) && (event.dvjh.length == 1)){
                this.number = event.dvjh.p1Data;
                this.source = event.dvjh.p1Name;
                
                this.total += this.number;
                this.timeStamp = event.timeStamp;
                
                if ((this.output != null) && (this.output != undefined) && 
                        (this.output.eventName != null) && (this.output.eventName != undefined)){
                        
                    var self = this; // bonne pratique car jQuery peut modifier this
                    
                    var outputEvent = new $.Event(self.output.eventName);

                    outputEvent.dvjh = {
                        length:1,
                        p1Name:new Array("Total", "Nombre", "Source", "TimeStamp ms"),
                        p1Data:new Array(this.total, this.number, this.source, this.timeStamp)
                    };
                    
                    $(this.output).trigger(outputEvent);
                }
            }
            
            return false;
        }
    };
})(jQuery);