Vanilla Javascript - #43 Função debounce
26/09/2019Na vídeo aula de hoje trataremos de uma função muito importante principalmente quando temos requisições sucessivas tais como as utilizadas nos eventos keyup e keydown, a função debounce.
Função Debounce no Javascript
A função debounce serve para darmos um pequeno delay na chamada da requisição, assim evitando que várias requisições sejam feitas consecutivamente.
Criaremos os seguintes arquivos: index.php, javascript.js e o controller.php
A nossa index.php ficará da seguinte maneira:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form name='form' id='form' method="get" action="controller.php">
<input type="text" name="search" id="search" placeholder="Search">
</form>
<script src="javascript.js"></script>
</body>
</html>O nosso controller.php vai exibir uma mensagem simples:
<?php
echo "hello world";E o nosso javascript fará o ajax, comunicando o front com o backend e utilizando a função debounce:
(function(win,doc){
'use strict';
let search=doc.querySelector('#search');
function sendForm(){
let ajax=new XMLHttpRequest();
ajax.open('GET','controller.php');
ajax.onreadystatechange=function(){
if(ajax.status===200 && ajax.readyState ===4){
console.log(ajax.responseText);
}
};
ajax.send();
}
search.addEventListener('keyup',debounce(sendForm,3000),false);
//Debounce
function debounce(func,wait) {
let timeout;
return function () {
clearTimeout(timeout);
timeout = setTimeout(func,wait);
}
}
})(window,document);No exemplo acima pode-se perceber que a função debounce aciona o método setTimeout para realizar o delay antes do envio da requisição.
Por hoje é só, sucesso nos códigos e na vida!
Posts Relacionados
