Javascript的防抖和节流方法怎么用
本篇内容主要讲解“Javascript的防抖和节流方法怎么用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Javascript的防抖和节流方法怎么用”吧!
1. 什么是防抖
【解释】： 防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。
【图解】：
【作用】：
当用户频繁触发该事件的时候，确保只进行最后一次的请求操作，节约请求的资源
【实现输入框的防抖】：
var timer = null // 1. 防抖动的 timer function debounceSearch(keywords) { // 2. 定义防抖的函数 timer = setTimeout(function() { // 发起 JSONP 请求 getSuggestList(keywords) }, 500) } $('#ipt').on('keyup', function() { // 3. 在触发 keyup 事件时，立即清空 timer clearTimeout(timer) // ...省略其他代码 debounceSearch(keywords) })【实现建议框缓存】：
定义全局缓存对象
// 缓存对象 var cacheObj = {}将搜索结果保存到缓存对象中
// 渲染建议列表 function renderSuggestList(res) { // ...省略其他代码 // 将搜索的结果，添加到缓存对象中 var k = $('#ipt').val().trim() cacheObj[k] = res }优先从缓存中获取搜索建议
// 监听文本框的 keyup 事件 $('#ipt').on('keyup', function() { // ...省略其他代码 // 优先从缓存中获取搜索建议 if (cacheObj[keywords]) { return renderSuggestList(cacheObj[keywords]) } // 获取搜索建议列表 debounceSearch(keywords) })2、什么是节流
【解释】： 减少一段时间内事件的触发频率。也叫节流策略。
【图解】：
【应用】
鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；
【鼠标跟随案例】：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script class="lazy" data-src="./lib/jquery.js"></script> <style> html, body { margin: 0; padding: 0; overflow: hidden; } #angel { position: absolute; } </style></head><body> <img class="lazy" data-src="./angel.gif" alt="" id="angel" /> <script> $(function () { // 获取图片元素 var angel = $('#angel') // 绑定鼠标移动事件 $(document).on('mousemove', function (e) { // 获取鼠标到x和y轴的距离设置给图片的高和左 $(angel).css('top', e.pageY-40 + 'px').css('left', e.pageX-40 + 'px') }) }) </script></body></html>3、节流阀
【解释】：
节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作。
当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了。
每次执行操作前，必须先判断节流阀是否为空。
【使用节流优化】：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script class="lazy" data-src="./lib/jquery.js"></script> <style> html, body { margin: 0; padding: 0; overflow: hidden; } #angel { position: absolute; } </style></head><body> <img class="lazy" data-src="./angel.gif" alt="" id="angel" /> <script> $(function () { // 定义一个节流阀 var timer = null; // 获取图片元素 var angel = $('#angel') // 绑定鼠标移动事件 $(document).on('mousemove', function (e) { // 判断节流阀是否为空 if (timer) return // 控制节流阀的时间 timer = setTimeout(function () { // 获取鼠标到x和y轴的距离设置给图片的高和左 $(angel).css('top', e.pageY - 40 + 'px').css('left', e.pageX - 40 + 'px') // 清空节流阀 timer = null }, 100) }) }) </script></body></html>到此，相信大家对“Javascript的防抖和节流方法怎么用”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
