OnMouseOver... après 300 ms d'inactivité de souris

Bonjour,

J'utilise le jquery datatables avec server_processing, numericComma, columnFilter, FixedHeader et scroller !

J'aurais aimé que la fonction "search()" soit lancée uniquement après 300 millisecondes d'inactivité de la souris. En effet, si je bouge très rapidement la souris sur 10 lignes, datatables va me lancer 10 fois la fonction search(). Ceci ne va donc pas être esthétique !

J'ai testé avec setTimeout(search(sref), 300).
Mais ceci ne résout pas non plus mon problème,
car si je bouge encore ma souris à la va-vite,
après ces 300 millisecondes,
la fonction search(sref) s'effectuera quand même,
avec aussi le même souci d'esthétique !

Je chercherai plutôt de lancer cette fonction,
après 300 millisecondes d'inactivité (rapide) de la souris...

Mais ici, je ne trouve pas !
Pouvez-vous m'aider ?
D'avance merci.

$(document).ready(function() {
	url();
	var oTable = $('#example').dataTable( {
		"bDestroy": true,
		"sScrollY": example,
		"bFilter": false,
		"bInfo": false,
		"bScrollCollapse": true,
		"BJQueryUI" : false,
		"aoColumns": [
			{ "sTitle": "comparer",		"bSortable": false,
			"sClass": "alignCenter", 	"bVisible": true							},
			{ "sTitle": "forme",		"bSortable": true,
			"sClass": "alignLeft",    	"bVisible": true							},
			{ "sTitle": "carat",		"bSortable": true,
			"sClass": "alignRight",  	"bVisible": true							},
			{ "sTitle": "taille",		"bSortable": true,
			"sClass": "alignCenter",  	"bVisible": true							},
			{ "sTitle": "couleur",		"bSortable": true,
			"sClass": "alignCenter",  	"bVisible": true							},
			{ "sTitle": "pureté",		"bSortable": true,
			"sClass": "alignCenter",  	"bVisible": true							},
			{ "sTitle": "poli",			"bSortable": true,
			"sClass": "alignCenter",	"bVisible":	(swColonne[11]==1)?true:false	},
			{ "sTitle": "sym",			"bSortable": true,
			"sClass": "alignCenter", 	"bVisible":	(swColonne[12]==1)?true:false	},
			{ "sTitle": "prof",			"bSortable": true,
			"sClass": "alignRight",  	"bVisible":	(swColonne[13]==1)?true:false	},
			{ "sTitle": "table",		"bSortable": true,
			"sClass": "alignRight",  	"bVisible":	(swColonne[14]==1)?true:false	},
			{ "sTitle": "fluo",			"bSortable": true,
			"sClass": "alignCenter", 	"bVisible":	(swColonne[15]==1)?true:false	},
			{ "sTitle": "prix/ct",		"bSortable": true,
			"sClass": "alignRight",  	"bVisible":	(swColonne[16]==1)?true:false	},
			{ "sTitle": "colette",		"bSortable": true,
			"sClass": "alignCenter", 	"bVisible":	(swColonne[17]==1)?true:false	},
			{ "sTitle": "Lg/lg",		"bSortable": true,
			"sClass": "alignRight",  	"bVisible":	(swColonne[18]==1)?true:false	},
			{ "sTitle": "délai",		"bSortable": true,
			"sClass": "alignRight",  	"bVisible": true							},
			{ "sTitle": "certificat",	"bSortable": true,
			"sClass": "alignCenter",  	"bVisible": true							},
			{ "sTitle": "prix",			"bSortable": true,
			"sClass": "alignRight",  	"bVisible": true							},
			{ "sTitle": "détail",		"bSortable": false,
			"sClass": "alignLeft",  	"bVisible": true							}
		],
		"sAjaxSource": "js/dt/chargementdata00.php" + argurl,
		"bDeferRender": true,
		"bServerSide": true,
		"sDom": "frtiS",
		"oScroller": {
			"loadingIndicator": true
		},
		"oLanguage": {
			"sLoadingRecords": "Chargement en cours...",
			"sZeroRecords": "Aucun diamant n'a pu être trouvé !"
		},
		"sScrollX": "100%",
		"sScrollXInner": coef,
		"fnServerData": function ( sSource, aoData, fnCallback ) {
			aoData.push( { "name": "more_data", "value": "my_value" } );
			$.getJSON( sSource, aoData, function (json) {
				maxref = json.iTotalRecords;
				triref = json.iTotalDisplayRecords;
				nbreference();
				fnCallback(json)
			} );
		},
		"aaSorting": [[ 16, "asc" ]]
	} );
} );

$('#example tbody tr').live('mouseover', function () {
	this.style.cursor='pointer';
	colour = this.style.backgroundColor + '';
	this.style.backgroundColor = '#EFE4EA';
	this.style.color = '#9F3082';
	var nTds = $('td', this);
	sref = $(nTds[0]).children(0).attr('id');
	sref = sref.substr(3);
	search (sref);
} );

$('#example tbody tr').live('mouseout', function () {
	this.style.backgroundColor = colour;
	this.style.color = '#666666';
} );

function search(id) {
	oRecord = id;
	var requete = creerRequete();
	var url = "php/ajaxphp_post.php";
	requete.open("POST", url, true);
	requete.onreadystatechange = function() {
		detailon(requete);	
	}
	requete.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	requete.send("item_id="+escape(oRecord)+"&opti="+nbsuppl);
}

Modifié par jytest (25 Mar 2013 - 13:39)

//Track the last activity you saw
var lastActivity = 0;

//Remember the last time you told the server about it
var lastNotified = 0;

//Determines how frequently we notify the server of activity (in milliseconds)
var INTERVAL = 1000;

function rememberActivity() {
    lastActivity = new Date().getTime();

    activityNotification();
}

function activityNotification() {
    if(lastActivity > lastNotified + INTERVAL) {

        //Remember when we last notified the server
        lastNotified = new Date().getTime();

    }
}

setInterval('activityNotification()', INTERVAL);

$.mousemove(function() {
    //Remember when we last saw mouse movement
    rememberActivity();
});

$.keyup(function() {
    //Remember when we last saw keyboard activity
    rememberActivity();
});

GIYF !
Source :
http://stackoverflow.com/questions/6110052/mouse-keyboard-inactive-execute-function-if-active-and-only-execute-once-in-a

Cdt, Xzen.
Modifié par xzenn (25 Mar 2013 - 22:38)

Merci xzenn.
Grâce à toi (et à notre ami commun très cher), je sens que la solution est proche !

Je n'arrive pas à le finaliser.
Maintenant, après avoir effectué plusieurs va-et-vient sur la tables,
quand je laisse ma souris inactive pendant 300 ms,
je n'obtiens pas toujours le "search" du dernier id recouvert par la souris !!!

Pouvez-vous m'aider, svp ?

Voici mon code transformé :

var lastActivity = 0;
var lastNotified = 0;
var interval = 500;

$('#example tbody tr').live('mouseover', function () {
	this.style.cursor='pointer';
	colour = this.style.backgroundColor + '';
	this.style.backgroundColor = '#EFE4EA';
	this.style.color = '#9F3082';
	lastActivity = new Date().getTime();
	if(lastActivity > lastNotified + interval) {
		lastNotified = new Date().getTime();
		var nTds = $('td', this);
		sref = $(nTds[0]).children(0).attr('id');
		sref = sref.substr(3);
		search(sref);
	}
} );

$('#example tbody tr').live('mouseout', function () {
	this.style.backgroundColor = colour;
	this.style.color = '#666666';
} );

function search(id) {
	oRecord = id;
	var requete = creerRequete();
	var url = "php/ajaxphp_post.php";
	requete.open("POST", url, true);
	requete.onreadystatechange = function() {
		detailon(requete);	
	}
	requete.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	requete.send("item_id="+escape(oRecord)+"&opti="+nbsuppl);
}

A l'aide, svp
Modifié par jytest (26 Mar 2013 - 15:19)