vue实现防抖、节流

本文记录了在Vue项目中实现防抖和节流功能的过程,以解决频繁触发事件导致的服务器资源浪费问题。防抖用于限制事件在用户停止输入后的一段时间内执行,而节流则确保单位时间内事件只执行一次。文章提供了代码示例并总结了两者的区别。
摘要由CSDN通过智能技术生成

序言 

    好久没写博客,正好今天项目需要增加防抖功能,特此记录一下。网上有很多例子,我试试了,没一个成功的(要哭了~~~~),最后参考别人的写法写了个,成功了。。。废话不说了,正文来了。

防抖

    使用场景:如搜索框,用户在输入的时候使用change事件去调用搜索,如果用户每一次输入都去搜索的话,就会消耗很大的服务器资源。如果每次用户停止输入后,延迟超过一定时间时,才去请求服务器的话,会节省服务器资源,提升用户体验。

    原理:事件回调函数在一段时间(300毫秒)后才执行,如果在这段时间内再次调用则重新从0开始计算到300毫秒的时间,当预定的时间内没有再次调用该函数,则执行事件回调函数

    代码示例:

/**
 * 防抖
 * @param {Function} func 要执行的回调函数 
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行 
 * @return null  
 */
let timeout;
export function Debounce(func, wait=300, immediate = false) {
   // 清除定时器
	if (timeout !== null) clearTimeout(timeout);
	// 立即执行,此类情况一般用不到
	if (immediate) {
		var callNow = !timeout;
		timeout = setTimeout(function() {
			timeout &
  • 5
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值