首页 > 编程语言 >JavaScript 中的去抖动

JavaScript 中的去抖动

时间:2022-11-08 15:01:42浏览次数:43  
标签:function const 函数 抖动 debounce queryGoogle JavaScript

JavaScript 中的去抖动_javascript

英文 | https://medium.com/pragmatic-programmers/debouncing-in-javascript-4c6dd704695a

翻译 | 杨小二


JavaScript 语言的发明是为了响应用户在网页上的交互。虽然大多数互动并不频繁,但有些互动可能会在短时间内反复发生。

如果你编写程序以在每次交互时执行 CPU 密集型功能,则可能会降低浏览器的速度。

你不能简单地删除函数,因为它是你程序的关键部分,但你也不能让它破坏程序的性能。

解决方案是实现去抖动功能。去抖动是一种编程技术,可让你确保任务不会频繁触发。

以实时搜索为例:每次按键都会触发一个事件,但是如果你立即对每个事件发出请求,你将不必要地使服务器陷入困境,因为用户可能还没有完成输入。

如果你想知道 async 的用途,请选择 Modern Asynchronous JavaScript(现在处于测试阶段),其中详细介绍了各种示例和模式。

更好的方法是仅在用户停止输入至少 200 毫秒后发送请求。

去抖动示例

让我们看一个例子。我们首先创建一个 HTML 输入元素,让用户输入搜索查询:

<label for="searchInput">Search:</label>
<input type="search" id="searchInput">

以下是我们的 JavaScript 代码。我们定义了一个 debounce 函数来控制我们的主函数运行的时间。 

这样,该函数不会立即发出 fetch 请求;相反,它将执行延迟 300 毫秒:

// debounce function
function debounce(callback, limit) {
let timeout;
return () => {
clearTimeout(timeout);
timeout = setTimeout(() => {
callback();
}, limit);
};
}
// main function
async function queryGoogle(e){
// use your own API key in production
const api = `https://www.googleapis.com/customsearch/v1?key=AIzaSyDDafor7FhfUGTvGpjVdE7Tomnt1Yg6XGg&cx=017576662512468239146:omuauf_lfve&q=${searchInput.value}`;


const response = await fetch(api);


// parse the body text as JSON
const data = await response.json();


// process the data
console.log(data);
}
// pass our main function to the debounce function
// the second parameter defines the delay in milliseconds
const debouncedKeyPress = debounce(queryGoogle, 300);
const searchInput = document.getElementById('searchInput');
// call the debounced function when a key is released
searchInput.addEventListener('keyup', debouncedKeyPress);

去抖动示例说明

首先,我们在 debounce 函数中定义一个超时变量(第 3 行)。由于关闭,此变量将可由返回的函数访问。

第 5 行取消先前建立的超时,以便计时器重新开始。

第 6 行开始一个新的超时时间,并在指定的毫秒数后调用回调函数 queryGoogle()。

结果是一个函数,作为我们主要函数的过滤器,可以消除不必要的反弹。

第二个函数 queryGoogle() 是一个异步函数,负责从 Google API 检索搜索数据。

在函数内部,我们发出一个 fetch 请求并将响应解析为 JSON。此时,结果已准备好进行处理。

滚动、按键和鼠标移动等重复触发的事件有可能对浏览器性能产生负面影响——尤其是当你的 JavaScript 代码完成繁重的任务时。

使用 debounce 函数来限制函数执行的速率,以提高程序的响应能力。

最后,感谢你的时间,编程愉快!


学习更多技能

请点击下方公众号



JavaScript 中的去抖动_javascript_02

JavaScript 中的去抖动_javascript_03

标签:function,const,函数,抖动,debounce,queryGoogle,JavaScript
From: https://blog.51cto.com/u_15809510/5833143

相关文章

  • 20个你需要知道的JavaScript简写代码片段
    英文| https://javascript.plainenglish.io/20-javascript-short-hands-you-need-to-know-in-2021-c0ed25a40837翻译|杨小二1、可选链你尝试访问对象上的嵌套属性时,你可......
  • 【JavaScript 教程】第五章 字符串01— JavaScript 字符串
    英文 | https://www.javascripttutorial.net/译文|杨小爱在上节,我们学习了JavaScript流程中的 continue 语句,错过的小伙伴可以点击文章《​​【JavaScript教程】第四......
  • 6 个 JavaScript 算术运算符
    英文|https://javascript.plainenglish.io/the-6-javascript-arithmetic-operators-you-need-to-know-about-4255ae8f2502翻译|杨小爱在您的开发项目中,您总是会遇到一些......
  • JavaScript超大文件上传解决方案:分片断点上传
    ​ javaweb上传文件上传文件的jsp中的部分上传文件同样可以使用form表单向后端发请求,也可以使用ajax向后端发请求    1. 通过form表单向后端发送请求    ......
  • javaScript简单的赋值运算符
    <----------------------------------------------赋值运算符------------------------------------------------------------>=号是赋值操作+=是加等于号,和(n=n+1)是......
  • ​给前端开发者的 14 个 JavaScript 代码优化建议
    英文|https://blog.bitsrc.io/14-javascript-code-optimization-tips-for-front-end-developers-a44763d3a0da作者| MahdhiRezvi译文| https://github.com/xitu/gold......
  • 用于现代JavaScript的Observer API
    英文| https://dev.to/codyjasonbennett作者|CodyBennettObserverAPI(观察者API)释放了Web隐藏的超能力,以创建真正的响应式体验,从懒加载关键内容到非侵入式性能监控。在......
  • 18行JavaScript代码构建一个倒数计时器
    英文|https://www.sitepoint.com   作者|NilsonJacques​有时候,你会需要构建一个JavaScript倒计时时钟。你可能会有一个活动、一个销售、一个促销或一个游戏。你可......
  • 14个 JavaScript 中鲜为人知的技巧
    英文| http://developer.51cto.com/art/201912/607686.htm人们通常认为JavaScript是一门很容易上手的语言,但是要做到精通却不简单。是的,这是因为JavaScript是一种非......
  • 8 个常用的JavaScript 比较运算符,你一定要知道
    英文|https://javascript.plainenglish.io/the-8-javascript-comparison-operators-you-need-to-know-cb952090d087翻译| 杨小爱1、相等我们将讨论的第一个比较运算符是......