Otimização de chamada de função em JS

Em algumas situações a chamada repetida de ajax e javascripts pesados e custosos pode virar um incomodo, tanto para o cliente (processamento, demora), quanto para o server (processamento, banda). Com uma tecnica muito simples você pode elimina-las.

O Problema: Em algumas situações, como carregamento dinamico de página, alguns campos podem ser ativados, chamando funções repetidamente.

A Solução: Criar uma função intermediária que chama a função custosa por meio de setTimeout! Veja:

Seu código antigo:

function valida_parcelamento() {
    bla()
    bla()
    //...
    new Ajax.Request('/acao_demorada/', {} )
}

Código otimizado:


var timeout = 9999
function valida_parcelamento(){
        // veja mais detalhes sobre esta var em Discussão
	var limite = 1000
	jQuery("#aviso").html( " É legal por alguma mensagem de feedback aqui, ou spinner" );
	// Cancela qq chamada de funcao menos recente, dentro do tempo limite
	clearTimeout(timeout)
	// Mantem a chamada de funcao + recente
	timeout = setTimeout("valida_parcelamento_slave()", limite)
}

function valida_parcelamento_slave() {
    bla()
    bla()
    //...
    new Ajax.Request('/acao_demorada/', {} )
}


Discussão: O modo de fazer é bastante simples, a função antiga tem seu nome concatenado com algum diferencial, no meu caso, escolhi chama-las de _slave e uma nova função é criada com o nome da antiga. Esta nova função tem uma função de gateway  para com a antiga, na prática ignorando as chamadas mais antigas e consecutivas.

Pelo lado positivo, esta tecnica não requer alterar nenhum HTML, e pode reduzir em muitas vezes a número de requisições.

Pelo lado negativo, a var limite é muito complicada de ser balanceada devido ao seu tradeoff: um número muito pequeno se torna inútil, pois em um computador lento as coisas demoram a carregar, então a função _slave acabaria sendo chamada varias vezes; por outro lado um número grande é ruim, pois obriga o usuário esperar d+ por uma resposta (tempo de execução da function + limite(ms)).

O ideal seria calcular a eficiencia do computador do usuário uma vez por meio de um benchmark simples e armazenar em cookie para usa-la de limite.

Caso, a funcionalidade de gateway seja desejável somente durante o tempo de carregamento, é possível desabilitar depois. Esta parte fica como tarefa 😛

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s