除了 防抖节流外,另一个常用的避免重复请求的方法:标记法

思路:在搜索栏等常用的请求目录下,当一次请求发起时,让此次请求必须有结果返回之后,才能发起下一次请求,无论返回成功还是失败。

方法:
1 先var 一个变量。
 

var  serFlag  = false;

2 请求发起时判断  serFlag,为true 则return;

 

// 获取数据
            fetchAttendences: function(type) {
                const vm = this;

                if (vm.serFlag) return
                vm.serFlag = true
                
                vm.$api.get('/center/admin/message/index/log-list', {
                    data: data,
                    success: function(res) {
                        vm.$Message.destroy();
                        vm.serFlag = false;
                        let data = res;
                        
                        if(data.list){
                            vm.tasks = data.list;
                        }
                        vm.$Message.destroy();
                    },
                    fail: function(err) {
                        vm.serFlag = false;
                        vm.$Message.destroy();
                        vm.$Message.error(err.msg);
                    }
                });
            },

节流(throttling)和防抖(debouncing)是前端开发中常用的性能优化技术,用于限制事件触发的频率。它们的应用场景如下: 1. 节流:在高频率触发的事件(如滚动、鼠标移动、窗口调整等)中,节流可以限制事件处理函数的执行频率,以降低事件处理的开销。常见的应用场景有: - 滚动加载:当用户滚动页面时,通过节流来限制请求数据的频率,避免多次重复请求。 - 表单验证:当用户在输入框中连续输入时,可以通过节流来限制验证函数的调用频率,减少不必要的验证请求。 - 防止按钮重复点击:当用户频繁点击一个按钮时,通过节流来限制按钮点击事件的触发频率,防止重复提交表单或执行其他重要操作。 2. 防抖:在频繁触发的事件中,防抖可以延迟事件处理函数的执行,只在一定时间内最后一次触发后才执行。常见的应用场景有: - 搜索框自动补全:当用户在搜索框中输入字符时,通过防抖来延迟发送请求,只在用户停止输入一段时间后才发送请求。 - 窗口大小调整:当用户调整窗口大小时,通过防抖来延迟重新计算布局或响应式样式的操作,减少频繁重排重绘带来的性能损耗。 - 输入框实时搜索:当用户在输入框中输入搜索关键字时,通过防抖来延迟触发搜索请求,提高搜索的响应速度。 总之,节流防抖都是用来控制事件触发频率的技术,在需要限制事件处理的频率时可以考虑使用它们来优化性能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值