html抖动代码js防发抖函数

我是这样理解的，限定某个事宜（函数）在指定时间内不重复触发。
比如有一个输入框，当用户输入后进行远程搜索，如果不限定频次，用户每输入一个字符就会发起网络要求，但要求的很大可能不是用户想要的，这时候就可以用防抖动机制，规定用户在500ms内没有新的输入才发起网络要求。

一个大略的防抖实现

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>debouce-每天一个知识点</title> </head> <body> <input type="text" id="name" /> </body> <script> //防抖函数 function debounce(fn, wait = 500) { var timer; return function() { clearTimeout(timer); timer = setTimeout(fn, wait); }; } //自己业务函数 function yourFunction() { var value = document.querySelector("#name").value; console.log(value); } //利用 document .querySelector("#name") .addEventListener("input", debounce(yourFunction, 500)); </script></html>

html抖动代码js防发抖函数 JavaScript