Criando função Debounce do Zero com JavaScript | Code/Drops #25

[@eliellima3560]

Meu Deus cara o teu cérebro é foda!, que conhecimento do car@lh#, espero chegar em um nível como esse, muito obrigado por esse vídeo, apesar de me perder em algumas partes achei muito foda, irei rever novamente pegar os conceitos e partir pra aplicação hehe

[@mozellidev]

Mayk, essa técnica acabou de salvar minha vida. O axios estava realizando duas requisições seguidas toda vez que o useEffect executava. Ficou com um cheirinho de gambiarra, mas resolveu. Valeu camarada!!

[@andersongomes5375]

Mayk sem palavras ... Que exxplicação nota 10000000 .

[@alexandrezelante2411]

Aula SENSACIONAL, obrigado. Você é incrível Mayk.

[@MarcosFerreiraIO]

Esse cara é muito foda no VanillaJS

[@rocketseat]

Top, né? 💜

[@theveryboringvlog]

@@rocketseat a gente aprende isso lá no launchbase?

[@felipefontoura7442]

Muito bom! É sempre satisfatório ver esses vídeos 👏🏼 Grato por compartilhar conhecimentos!

[@rocketseat]

Valeeeu pelo feedback, Felipe! 💜

[@brunohublocal188]

Muito bom Maykão. Obrigado!

[@douglasodev]

Excelente vídeo, Mayk. Pura técnica e estilo. Show de bola!

[@rocketseat]

Valeeeu pelo feedback, Douglas! Makyão é fera, né? 💜

[@douglasodev]

@@rocketseat Maykão é o monstro sagrado da Rocket. Guardem essa jóia!

[@rocketseat]

@@douglasodev Pode deixar ! 💜

[@theveryboringvlog]

maaaano .. quero ser igual esse cara ... virei fã

[@rafaelpalau6139]

Mestre Maykão. Gênio.

[@rodrigolanes]

Vídeo muito bom. Parabéns.

[@tecvalle4377]

Pow mano. Vc manja pakas e sabe compartilhar o conhecimento pow. Parabéns!! Sucesso!!

[@josevalente1667]

Muito bom Maykão na área!... Valeu cara

[@rocketseat]

Valeeu, José! Maykão é show, não? 💜

[@josevalente1667]

@@rocketseat Pô... manda bem demais!... Já compartilhei o vídeo no trabalho... Pra utilizar o conhecimento numa feature que estávamos desenvolvendo

[@ocharlespereira]

As suas aulas e do irmão do DeShamps são show de bola!

[@rocketseat]

Diego Deschamps, Felipe Teló, Michel Fernandes, no final parecem até pseudônimos da mesma pessoa... hahahhaha 💜

[@maasilva09]

Conteúdo ótimo, Maykão. (07:38) Se você apertar o shift (option para o Mac ) junto com o Enter Pode pular de linha no console e não executa o seu código.

[@brunodepaula5293]

Caraca ensinou inumeros conceitos soh com essa funcao...mto bom..parabens!

[@rocketseat]

Maykão tem um jeitinho especial de ensinar, que faz a gente aprender tudo sem nem perceber 💜

[@RhomennikD]

Instrutor nota 10, muito bom!

[@rocketseat]

Maykão é incrível né? Vaaleu! 💜

[@rafaelfurtado1923]

Mais um inscrito. Parabéns!

[@brenosena1439]

Sua didática é excelente, parabéns!

[@theveryboringvlog]

29:16 que legal que a gente chegou até aqui ... eu parei la no começo

[@dyja007]

Aula excelente!!! Obrigado Mayk por compartilhar esse conhecimento. Parabéns Rocketseat!!

[@roniepetersondf]

Muito bom. Parabéns.

[@fagnersales532]

Os vídeos do Mayk são muito massa

[@rocketseat]

Ele faz a gente entender tudinho, né?

[@gusflopes]

Apanhei muito tempo pra conseguir fazer isso!! Bom demais assim mastigado e explicado o conteúdo!!

[@rocketseat]

Vaaleu, Gustavo! 💜 Maykão faz a gente aprender qualquer coisa né?

[@relfarias]

caraca mais videos com tecnicas como estas please!!! nota mil, video top, thanksssss

[@rocketseat]

Poooode deixar, Rejaine! 💜

[@lucas_7071]

Nossa esse code drops explodiu a minha mente

[@rocketseat]

A melhor sensação é a do mindblow 💜

[@ryuogawa10]

Mayk mandou muito bem. Bem explicado. Parabéns

[@rocketseat]

Ele é incrível, né? 💜 Valeu pelo feedback, Ryu! 💜

[@rodrigoaraujo1608]

Estou aprendendo JavaScript, e seus vídeos estão me ajudando muito, Obg Rocketseat, em especial *Mayk Brito* tu é foda !!!!

[@rocketseat]

Que bom que estamos fazendo parte do seu aprendizado, Rodrigo! 💜

[@Niehde]

Muito boa a explicação da função que retorna outra função! Parabéns!

[@rocketseat]

Vaaaleu, Fernando! 💜 Maykão é show, né? 💜

[@JanderSilva01]

Obrigado Mayk!

[@wallisonfelipe5997]

Aula show de bola!

[@rocketseat]

Vaaleu, Wallison! 💜

[@CostelaFifa]

Parabéns Mayk!! Genial a ideia cara, recentemente tive que utilizar esta técnica mas não sabia o nome. Massa demais parabéns pelo trabalho e excelente didática!!

[@rocketseat]

Valeeeu, João! Maykão é fera, não? 💜

[@CostelaFifa]

@@rocketseat Demais!! haha

[@dayvs98]

No começo do vídeo fiquei meio confuso, no fim parecia que eu tava no começo KKKKKK, zoeira a parte o Mayk explica bem demais 💜

[@rocketseat]

😂😂😂😂Valeeu, Dayvison! 💜 Maykão arrasa né?

[@gleniocarvalho1]

Um monstro! Parabéns! Vai ajudar muito a galera! Assim como me ajudou!

[@rocketseat]

Maykão é sensacional, né? 💜 Valeu pelo feedback, Glenio! 💜

[@-lotosuy]

Eu no começo do vídeo: hmmmm Eu no final do vídeo: :O

[@rocketseat]

Eu lendo esse comentário: 🤩💜

[@takaharayuri]

Fiquei exatamente igual kk

[@marcosdissotti]

Vlww Maykão! me ajudou dms o/

[@rodolfosilva8815]

Muito legal... Top em

[@rocketseat]

Vaaleu, Rodolfo! 💜

[@pradella]

Maykão monstro!

[@rocketseat]

ele é fera, né? 💜

[@jonasrufino7823]

Melhor professor.

[@rocketseat]

Maykão é incrível! 💜

[@umcasalcompastoralemao]

Ola. Obrigado pelo apoio que tem dado a toda comunidade de programadores iniciantes assim como da longa data. Quero muito implementar um scrollable tab view no react native. E possivel? obrigado pela Ajuda.

[@rocketseat]

Faala, Delcio! Valeu pelo feedback 💜 Você já conhece a nossa comunidade aberta? Por lá você pode tirar essas e outras dúvidas 💜 segue o link: rocketseat.com.br/comunidade

[@maitelevyforever]

Gosto muito do seu estilo de compartilhar conhecimento👏👏👏

[@rocketseat]

O Maykão consegue fazer qualquer um entender qualquer coisa, né? 💜

[@maitelevyforever]

@@rocketseat ele faz parecer mais fácil do que é ahahaha

[@rocketseat]

@@maitelevyforever Isso é verdade!! 💜

[@gabrielfurquimdeoliveira8478]

Boa Mayk, a maneira que vc usou para fazer ficou muito bacana!

[@rocketseat]

Ele sempre consegue deixar tudo bem simples pra gente entender, né? 💜

[@wejesuss-1104]

Muito foda, a parte de retornar uma função e passar no timeout deu aquele "descobri o mundo agora" kkkk

[@rocketseat]

Quando vem aquele mindblow é sensacional, né? 💜

[@AP-gc5ss]

Mayk, você não tem um curso completo ? tipo na udemy?? você ensina muito bem!

[@JezmaelBasilio]

Era tudo que eu estava precisando agora, show de bola!

[@rocketseat]

Que bom, Jezmael! 💜 Ficamos felizes 💜

[@philipess23]

Boa aula amigo, parabéns uso esse procedimento e recomendo :)

[@rocketseat]

Vaaleu Philipe! Maykão é fera, né? 💜

[@philipess23]

Rocketseat Sim amigo e bem didático gosto do vosso trabalho continuem assim :)

[@rocketseat]

@@philipess23 Pode deixar! 💜

[@eltonrodrigues5786]

boa Maikão!!!!

[@girvX]

Como vcs lêem meus pensamentos, sempre fiquei pensando se ao invés de ficar executando evento a cada vez que digitamos, ele pudesse executar 1 vez apenas quando terminamos de digitar tudo, aguardando 1 segundo, pois caso nesse tempo o usuário volte a digitar, o evento nao aciona e assim não fica chamando o back end toda hora!

[@rocketseat]

Nós temos certos poderes... 🔮👀

[@maykbrito]

@@rocketseat 👁

[@felipesuknaic9358]

Kkk como diria um rapaz de um canal aqui esse conteúdo tá delicinha

[@rocketseat]

Famoso Michel Teló 😂💜

[@felipesuknaic9358]

@@rocketseat kkkkk

[@maykon-oliveira]

Aprendi que eu não sei nada de JavaScript 😲' Muito bom!!! Poderia trazer implementações de outras coisas TB, alguns operadores do Rxjs.

[@rocketseat]

Vaaleu pelo feedback e pela sugestão, Maykon! 💜

[@thiagomelro2905]

Fala aí Mayk, Muito boa a explicação, valeu mesmo por mais esse drops. obs.: Mrs. é abreviação de Mistress em inglês, acho que esse Denins é uma senhora. :D

[@rocketseat]

Maykão é incrível né? 💜

[@thiagomelro2905]

@@rocketseat Mayk é fenomenal, tenho aprendido muita coisa boa, por mais que ainda seja avançado demais pra mim (pois ainda estou engatinhando) já constrói o arcabouço técnico pro futuro. 💜

[@rocketseat]

@@thiagomelro2905 Fica tranquilo, que logo você voooa! 💜

[@matheusantonio174]

Cara, conteúdo excelente! Vai ajudar muito! S2

[@rocketseat]

Que bom, Matheus! 💜 Valeu pelo feedback!

[@natanmedeirosalvesdearaujo108]

Se mutar o audio, parece o Tirulipa kkkkkk Brincadeiras à parte, excelente vídeo!

[@rocketseat]

Hahahah💜 Vaaleu, Natan! 💜

[@tiagopaees]

Show! conteúdo muito bom!

[@rocketseat]

Valeu, Tiago! 💜

[@skas0lowAndMusic]

Fera demais kkk, so não entendi muito a questão do clojure, seria tipo um construtor da função?

[@rocketseat]

closure é quando uma variável criada e acessível dentro de um escopo, e pode ser acessada em escopos dentro daquele, mas não em escopos fora daquele. Ou seja, você criou uma função, e uma variável dentro dessa função, então, essa variável está acessível em qualquer função que você criar dentro dessa função principal, mas essa variável não vai estar acessível, ou sendo vista, fora dessa função principal... 💜 Se quiser se aprofundar, pode seguir esse documento: developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Closures 💜

[@kayorenato]

Mais um vídeo top da Rocket 🚀 pilotado pelo predador, não poderia ser ter um resultado menor que ASTRONÔMICO 🌟. Maykão que recurso do VSCode é esse em que vc usou para guardar blocos de código, isso aí é uma mão na roda. Passa a call para gente.

[@antoniocenteno6694]

Também gostaria de saber...

[@rocketseat]

Faala, Kayo! Valeu pelo feedback massa! 💜 é uma extensão chamada Alfred, porém ela só funciona no MacOs... Mas tem semelhantes para linux e windows também, como o uLauncher, você pode saber mais sobre essa ferramenta aqui nesse vídeo do nosso colega, o João Inácio. kzbin.info/www/bejne/jofdk4uvrtWsmMU 💜

[@kayorenato]

@@rocketseat fechou então pq aqui MacOS 😁

[@maykbrito]

Kayao!! TMJ! 🙌🏽

[@kayorenato]

@@maykbrito você é o Cara 🤘🏻

[@micaelkeys]

Massa d+ doido

[@rocketseat]

Topzera, né? 💜

[@micaelkeys]

@@rocketseat psé kk

[@JrMarquesHD]

Boa Maykão!

[@rocketseat]

Maykão é fera, né? 💜

[@JrMarquesHD]

@@rocketseat manda muito! só não gostei dele usando laranja ao invés do tradicional roxo da RS kkk

[@rocketseat]

O laranja é para conteúdo mais iniciante 💜

[@JrMarquesHD]

@@rocketseat Boaa

[@depurandocodigo9336]

uau, incrivel.

[@rocketseat]

Top, não? 💜

[@nathanhugo7213]

Estou aprendendo Python e coloquei JS como minha próxima linguagem,eu gostaria de saber das aplicações do JS no Back-End e se você recomendaria aprender JS no front-end primeiro e depois ir para o back-end? Forte abraço!

[@dayvs98]

Na rocketseat tem um curso gratuito de Javascript se você já sabe um pouco sobre programação é uma boa começar por ele, não tem muita enrolação, agora se você deseja bem mais iniciante começa com o curso do Guanabara 🙃

[@nathanhugo7213]

@@dayvs98 Obrigado!

[@rocketseat]

💜

[@renanfelipeferreira2410]

Muito bom!

[@rocketseat]

Vaaleu, Renan! 💜

[@CaioLesnock]

Caraca, muito bom!

[@rocketseat]

Valeeeu, Caio! 💜

[@marciosouza3371]

Peraí, você não é o amigo do Carinha que mora logo alí? Ahaha. Ótima aula!

[@rocketseat]

🤔🤔 hahaha Valeu pelo elogio, Márcio! 💜

[@felipemarinho1326]

Show !

[@rocketseat]

Valeeu, Felipe! 💜

[@glebsonsantos3341]

Boa! Só não entendi pq funciona declarando a variável 'time' fora da função, mas se declaro dentro não.

[@brunohideki1798]

Top nego

[@rocketseat]

🔝🔝

[@personalpcgames8241]

cara JavaScript eu entendo de: variáveis, arrays, loops:iterações: for, while , do while, for in, for of, objetos, function, if, if else, aninhamento, switch, básico de DOM, operadores inclusive ternários, tipos de valores inclusive booleanos, tenho uma lógica mediana, alguns métodos ,ums 10, um pouco de HTML um pouco de CSS3 esta média de conhecimento , a quarentena foi produtiva ,kkkk . A pergunta é, ja da pra dizer que eu sou um programador ? Da pra fazer alguma coisa mais complexa já ,sem ser esses projetinhos de sinaleiro ,média escolar ,etc ?

[@rocketseat]

Acreditamos que a partir do momento que você escreve uma linha de código, já é um programador! 💜 Penso que pra projetos mais complexos você precise de mais algumas ferramentas ainda, mas com certeza já dá pra fazer algo bem bacana! 💜

[@marlonrtt]

É uma extensão que faz esse paranauê do clipboard pra ter várias coisas nele e escolher oq colar?

[@rocketseat]

Faala, Marlon! É uma extensão para MacOS chamada Alfred, mas tem similares para outros sistemas operacionais... se chama uLauncher 💜 ext.ulauncher.io/

[@principe.borodin]

fantastico.

[@rocketseat]

Vaaleu, Igor! 💜

[@jHallyson32]

oloco kkkk já me sinto foda só de aprender isso kkkkk

[@rocketseat]

Pode ter certeza que você é! 💜💜💜

[@alexrodriguesmoreira820]

Porra muito louco isso kkk

[@rocketseat]

Legal pra caramba, né? 💜

[@vitoriaheliane7238]

👏👏

[@rocketseat]

💜

[@TheVictorSantiago]

Fiquei interessado no vídeo que ele fala sobre o comportamento do 'this', alguém sabe qual é?

[@rocketseat]

Faaala, Victor! O vídeo que o Maykão se refere é esse aqui 💜 kzbin.info/www/bejne/fYTUg2WfYrWkbNE

[@sandroex2011]

Cara, vc não tem noção de como eu procurei como funcionava a logica do debounce.... obrigado

[@rocketseat]

Que bom que encontrou o que procurava por aqui! 💜💜

[@JeanCabral]

Show

[@rocketseat]

Valeeeu Jean! 💜

[@MrHUGOLADEIRA]

No typescript não ta funcionando, mesmo colocando os types... não tem clearTimeout com segundo parametro: "declare function clearTimeout(timeoutId: NodeJS.Timeout): void;"

[@rocketseat]

Faaala, Hugo! Beleza? Você conhece a nossa comunidade aberta? Você pode tirar essa dúvida por lá! 💜💜 Segue o link: rocketseat.com.br/comunidade

[@abnerwillys]

Buguei :O

[@xaakla]

Faz um vídeo sobre autenticação de usuário com Google oauth

[@rocketseat]

Valeu pela sugestão, Diego! 💜

[@xaakla]

@@rocketseat 💜💜💜

[@douglaslisboa9]

Tu é o Luciando(League of Legends) com q.i elevado. 'kk

[@rocketseat]

😂😂💜

[@filspyrospapabundus]

💜 Muito bom mesmo!! idéia: faça um sistema de votação com um back e front em nodejs..

[@rocketseat]

Vaaaleeeu pela sugestão e pelo feedback, Isaque! 💜

[@MatheusRodrigues-qw9em]

GOD

[@valdineidossantos]

:( vou ter que ver duas vezes

[@rocketseat]

Fica tranquilo, assiste com calma! O importante é aprender 💜

[@gabrieldias3663]

só não entendi a necessidade prática da refatoração do início para o código final

[@gabrieldias3663]

(sou iniciante)

[@heraldo623]

Nunca confie no frontend kkk debounce deve ficar tambem no servidor

[@girvX]

Eu como novato fiquei pensando se no servidor tb o debounde deveria ser usado! Vlw pela resposta!

[@heraldo623]

@@girvX O debounce no lado do servidor serve pra barrar usuários mal intencionados. O debounce no frontend só serve para os usuários normais. O ataque mais comum contra sites é o DDoS que derruba um site simplesmente pela inundação de requisições, os atacantes buscam pontos onde o site gasta mais processamento e atacam.

[@girvX]

Eu percebi isso quando fui brincar com react usando a API do Github pra listar infos do usuário , percebi que ele limita o client fazer requisiçoes 60 vezes por hora apenas, passando disso ele bloqueia o uso por 1 hora! Pra mim que sou novato minha mente explodiu, pois logo pensei que isso eh uma de várias estratégias que algum backend pode fazer para evitar DDoS certo? Minha pergunta eh: Existe varias estrategias pra evitar isso? A pessoa responsável pela segurança pode inventar algum tipo de segurança pra ela pra digitar o atacante?

[@girvX]

Pra ela evitar* o atacante

[@heraldo623]

@@girvX Geralmente as empresas delegam a proteção contra DDoS a terceiros como a CloudFlare. De início tem de ser possível diferenciar quem é usuário legítimo e quem é atacante. É fácil reconhecer um atacante pois o mesmo se comporta de maneira diferente dos outros, ele está sempre buscando sobrecarregar o site. Mas pra isso as restrições sobre o funcionamento do frontend devem ser definidas no backend, ou seja, o backend não confia no frontend. O backend sempre verifica se o frontend está se comportando como deveria. A dificuldade maior está em barrar o atacante, pois vc não pode simplesmente bloquear o IP, já que muitos IPs são compartilhados, o bloqueio poderia afetar outros usuáriod. Vc pode planejar ações de mitigação do ataque, como permitir requisições apenas de usuários autenticados e bloquear novos registros de usuário. Isso te dá mais tempo para reduzir os possiveis danos do ataque.

[@RodrigoDiasS]

Muito legal a ideia, mas como arrow function fica muito feio e ineligivel Pra mim explicito é melhor que implicito

[@rocketseat]

Valeu pela crítica, Rodrigo! Críticas são sempre construtivas 💜

[@RodrigoDiasS]

@@rocketseat mas a explicação para chegar no final foi muito boa

[@xmatheusftc]

Pô, sou muito fã da Arrow function

[@micaelkeys]

segundo

[@rocketseat]

👏

[@leolima8585]

Com 30 minutos de vídeo, me confundi muito sobre duas arrow function na mesma const, onde estaria esse vídeo amigo, sobre duas arrow function na mesma const, explicações sobre isso

[@heraldo623]

Em arrow function o resultado da expressão que vem depois da seta é retornado. Por exemplo: const func = () => () => 1; É o mesmo que: const func () => function() {return 1}; Nos dois casos func()() retornaria 1 e func() retornaria a função mais interna.

[@rocketseat]

💜

[@leolima8585]

Achei nada engraçado pessoal curtir uma insatisfação, kkkkkkk, povo curti tudo, cuidado pra não confundir o pólo norte com o seu pólo sul.

[@rocketseat]

@@leolima8585 Nós curtimos pois toda crítica é construtiva. Tentamos sempre aproveitar o melhor de todos os feedbacks, e por isso nós curtimos tudinho! 💜

[@leh2289]

Primeiro comentário! :)

[@rocketseat]

👏

[@theveryboringvlog]

me perdi todo ...

[@leolima8585]

Assisti, 16 minutos de vídeo de tanto tirar, botar e explicar rápido, já desisto de continuar, irmão qual sao os problemas desses vídeos gratuitos? Não pode fazer tudo certo de uma vez e explicar linha a linha do código , nuns COMENTÁRIOS mais calmos, seu vídeo não foi chato, legal que você faz a pessoa lembrar de vários estratégias que não chegam ao objetivo do debounce, beleza isso é um ponto positivo, mas tem gente que esqueceu, ou fazem anos que não vê o completo do javascript, ou não sabe muito de javascript e isso não fideliza novos usuários iniciantes nesses cursos da RocketSeat. Espero que entenda como crítica construtiva. O LEGAL DELE COM 27 min e 20 segundos, ahhhhhh, passando um parâmetro event aqui, você tem que lembrar que eu falei isso lá no começo, É sério? Não lembrei mais do event de tanto, tira, bota, coloca, põe, retirar, insere, busca, fecha, retorna. Qual é o dicionário do programador iniciante? Kkkkkkkk, quase morro de rir aqui ao escrever isto Se o Mike Brito tivesse a paciência de informar detalhes como esta voz neste vídeo, iniciante si empolgava. kzbin.info/www/bejne/nJ63pqycZ9Smq5I (NÃO ESTOU FAZENDO PROPAGANDA DE ALGUEM, ENTENDAM) Chefe Mike Brito, você é humilde em pôr a cara na tela do you tube, e explicar , algo que muita gente não tem coragem, nem por voz,

[@marlonrtt]

Digamos que esse tipo de conteúdo não é interessante pra quem é iniciante em JS ou pra quem conhecia, parou de usar e esqueceu. Dá pra rodar o vídeo mais devagar, dá pra ir acompanhando na sua IDE local e pausando o vídeo pra pegar a linha de pensamento dele.

[@rocketseat]

Faala, Léo! Obrigada pela crítica, são sempre construtivas! 💜 Nós temos alguns quadros aqui no canal, e o Code/Drops é pra ser algo mais demonstrativo mesmo, não tem tanto foco em iniciantes... Você pode ver que em outro vídeo do Maykão, ele explica bem detalhadinho e bem devagar! 💜 kzbin.info/www/bejne/fn-Uhp2wh7iXeM0 e kzbin.info/www/bejne/nZm3o6NnrcRkd9U são vídeos mais iniciantes, e mais "devagar" hehehe💜

[@leolima8585]

@@rocketseat até gora aaaiistindo n o vídeo, não sei tou em 2019 ou 2020. Que ano eu tou? Vídeo me deixou desnorteado

[@rocketseat]

@@leolima8585 O início pode parecer um pouco complicado mesmo, mas é como aprender um novo idioma. No começo parece que não vai dar certo, mas com certeza vai! 💜💜 Acreditamos em você! 💜

[@CarlosEustaquioTech]

Pausei o vídeo e vim aq só pra dizer q n tô mais entendendo é nada

[@rocketseat]

Respira fundo, vai com calma que vai dar certo!! 💜

[@CarlosEustaquioTech]

@@rocketseat Pois eeeé! Num é que no fim começou a fazer sentido?! Pausei algumas vezes ⏯️, voltei outras, as peças se encaixaram! 😄

[@rocketseat]

@@CarlosEustaquioTech Boooooa! Aí sim!! 💜