javascript函数防抖节流，适用于搜索多次触发请求等场景。

最新推荐文章于 2024-06-14 14:14:14 发布

松竹669

最新推荐文章于 2024-06-14 14:14:14 发布

阅读量565

点赞数 13

分类专栏：程序员文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2303_79056168/article/details/137961268

版权

程序员专栏收录该内容

163 篇文章 0 订阅

订阅专栏

文章介绍了在JavaScript中如何在公共方法如untils.js中实现防抖和节流功能，以减少频繁事件触发造成的资源浪费。通过实例演示了防抖在输入事件中的应用，并解释了防抖和节流的区别：防抖在指定间隔内延迟执行，而节流限制同一时间周期内只执行一次。

摘要由CSDN通过智能技术生成

在公共方法中（如 untils.js 中），加入函数防抖和节流方法

// 防抖 export function _debounce(fn, delay) { var delay = delay || 200; var timer; return function () { var th = this; var args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(function () { timer = null; fn.apply(th, args); }, delay); }; } // 节流 export function _throttle(fn, interval) { var last; var timer; var interval = interval || 200; return function () { var th = this; var args = arguments; var now = +new Date(); if (last && now - last < interval) { clearTimeout(timer); timer = setTimeout(function () { last = now; fn.apply(th, args); }, interval); } else { last = now; fn.apply(th, args); } } }

在需要使用的组件引用

import { _debounce } from "@/utils/public";

在 methods 中使用

methods: { // 改变场数 changefield: _debounce(function(_type, index, item) { // do something ... }, 200) }

应用：

==================================================================

函数防抖(debounce)

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

<body> <input type="text" id='unDebounce'> </body> </html> <script> //模拟一段ajax请求 function ajax(content){ console.log('ajax request ' + content) }; letinputa = document.getElementById('unDebounce'); function fn(e){ ajax(e.target.value) } //防抖函数，处理多次被触发的事件，只执行最后一次 inputa.addEventListener('input', fn) </script>

看一下运行结果：

在这里插入图片描述

可以看到，我们只要输入一个字符，就会触发这次ajax请求。不仅从资源上来说是很浪费的行为，而且实际应用中，用户也是输出完整的字符后，才会请求。下面我们优化一下：

<body> <input type="text" id='unDebounce'> </body> </html> <script> //防抖函数 function _debounce(fn, delay) { var delay = delay || 200; var timer; return function () { var th = this; var args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(function () { timer = null; fn.apply(th, args); }, delay); }; } //模拟一段ajax请求 function ajax(content){ console.log('ajax request ' + content) }; let inputa = document.getElementById('unDebounce'); function fn(e){ ajax(e.target.value) } //防抖函数，处理多次被触发的事件，只执行最后一次 inputa.addEventListener('input', _debounce(fn,1000)) </script>

在这里插入图片描述