Éviter les appels de fonction en double en javascript

Geoffrey — Thu, 12 Apr 2007 13:22:00 +0200

Dans un accès de désespoir vu l'activité débordante de ce blog en ce moment, je me lance et je vous propose cette petite librairie javascript qui va vous permettre d'éviter les appels de fonction en double:

var Defer = {
	config: {
		defaultTimeout: 1000
	},
	stack: {},
	schedule: function(id, fn, timeout) {
		if (typeof(timeout) == 'undefined') {
			timeout = Defer.config.defaultTimeout;
		}
		if (typeof(Defer.stack[id]) == 'undefined') {
			Defer.stack[id] = {defer: false, fn: fn, timeout: timeout };
			window.setTimeout('Defer.execute(\'' + id + '\')', timeout);
		} else {
			Defer.stack[id].defer = true;
		}
	},
	execute: function(id) {
		if (typeof(Defer.stack[id]) != 'undefined' && !Defer.stack[id].defer) {
			Defer.stack[id].fn();
			Defer.stack[id] = undefined;
		} else {
			Defer.stack[id].defer = false;
			window.setTimeout('Defer.execute(\'' + id + '\')', Defer.stack[id].timeout);
		}
	},
};

On peut l'utiliser ainsi par exemple (jquery requis):

$(document).ready(function() {
	$('#nickname').keyup(function() {
		Defer.schedule('chknickname', function() {
			$.get('/account/check_nickname.php', { nickname: $('#nickname').val() }, function(data) {
				data = eval(data);
				$('#nickname_availability').html(data ? 'Pseudo disponible' : 'Pseudo indisponible');
			});
		}, 2000);
	});
});

Concrétement, ce bout de code attache à un input un événement qui ne sera executé que s'il n'est pas répété avant une certaine période (2 secondes ici). C'est à dire qu'on évite de faire une requête xmlhttp à chaque keyup, on attend plutot que l'utilisateur arrête de taper un moment avant de balancer la sauce. A noter que de par la méthode utiliser, l'espace de nommage d'execution de la fonction change (par exemple ici, on ne peut pas utiliser this pour accéder a l'input).

Voila voila.

Mirmo Dynamics - Tag - library

Éviter les appels de fonction en double en javascript