设为首页收藏本站
开启辅助访问
【web开发】前端如何优雅实现防抖和节流 您所在的位置：网站首页 › 苹果手机如何设置防抖功能 › 【web开发】前端如何优雅实现防抖和节流

【web开发】前端如何优雅实现防抖和节流

2024-06-29 03:55| 来源: 网络整理| 查看: 265

写在前面： 什么是防抖？什么是节流？ 顾名思义，防抖就是防止你的手抖，手一抖点击页面按钮时候就会出现重复点击的情况，如果是提交按钮就可能导致多次提交操作，也就会向服务器发送多个请求，这并不是我们想看到的，所以我们在对按钮点击、鼠标移入移出等多个事件均可以进行防抖的处理。 在这里插入图片描述 那么节流呢？也就是说节省流量，比如水龙头出水，一直打开会一直流，2块钱一吨的水很快就没了，那么我们可以将其开关拧到很小的地方让水一滴一滴的出来，就可以实现2秒只出一滴水，那么我们做点击的时候也可以做到规定时间周期内只触发一次。 在这里插入图片描述 **区别：**函数节流无论事件触发有多频繁，都会保证在规定周期内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。 一、防抖实现 1、event事件特殊定制化实现 $.event.special原理来实现，依赖jquery自身封装的event事件 核心代码实现：

var CLICK_EVENT_KEY = 'click-shake'; var BOUNCING_DURATION = 2000; //通过自定义event特殊事件来实现防抖 $.event.special[CLICK_EVENT_KEY] = { bindType: 'click', handle(event) { if ($(this).data('clicking')) { return } else { $(this).data('clicking', true); event.handleObj.handler.apply(this, arguments); var _this = this; setTimeout(function () { $(_this).data('clicking', false); }, BOUNCING_DURATION) } } } $('button.shake').on(CLICK_EVENT_KEY, function () { var doms = '.oncli' console.log("触发点击事件（防抖）"); changeData(doms); }); $('button.not-shake').on('click', function () { var doms = '.oncli'; console.log("触发点击事件（不防抖）"); changeData(doms); }); 具体应用： 1、修改event防抖(2s) 主要通过修改jquery的event事件-$.event.special(自定义特殊化事件，对象用于某些事件类型的特殊行为和属性) 点击防抖 正常点击 0

效果图如下所示： 在这里插入图片描述 需要demo的可以关注留下您的邮箱哈，有空定发！！！



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有