理论小结:

函数防抖和函数节流都是防止某一时间频繁触发,但是这两兄弟之间的原理却不一样。
函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行。

实现登录按钮在间隔时间内不会向手机一直发送验证请求:

function throttle(fn, wait) {
    var pre = Date.now();
    return function() {
        var context = this;
        var args = arguments;
        var now = Date.now();
        if (now - pre >= wait) {
            fn.apply(context, args);
            pre = Date.now();
        }
    }
}
// 一键登录
$('#btnLoginMyPhone').addEventListener("click", throttle(quickLogin, 3000));

function quickLogin() {
    var boxFlag = $(":checkbox").is(':checked');
    if (!boxFlag) {
        showError("请同意登录服务协议");
        return;
    }
    if (msisdn) {
        login('G4');
        return;
    } else {
        var phone = $.trim($('#phone').val());
        if (!mobileValidate(phone)) {
            showError('请输入正确的手机号');
        } else {
            // 禁止用户重复点击
            if (repeatFlag) {
                showError("请勿重复点击");
                return;
            }
            sendSimAuth(phone);
            showPopAlert('请在手机上确认登录');
        }
    }
}

前端防抖和节流合二为一相关推荐

  1. 前端防抖与节流超详细讲解

    前端防抖与节流超详细讲解 前言 防抖 什么是防抖 实现防抖函数 节流 什么是节流 实现节流函数 防抖与节流注意事项 前言 防抖与节流通常作为项目优化的手段,一般都是为了防止用户在短时间内快而频地多次操 ...

  2. js基于lodash实现前端防抖与节流

  3. 前端面试查漏补缺--(一) 防抖和节流

    前言 本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...

  4. 防抖与节流方案_前端ajax优化解决方案

    伴随着前端ajax的应用场景越来越多,那就免不了一个整合的ajax优化解决方案了,自己优化太麻烦?没事,有它帮你解决:hajax 与当下比较热门的请求库 axios 和原生的 fetch相比,haja ...

  5. 前端面试--什么是防抖和节流

    写在前面 CSDN话题挑战赛第1期 活动详情地址:https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f 参赛话题:前端面试宝典 话 ...

  6. 马小看前端(防抖和节流)

    马小看前端(防抖节流) 在前端的开发过程中,有一部分用户行为频繁的去触发事件,而对于dom操作来说,有耗费性能的问题,很可能导致卡顿,甚至浏览器的崩溃,防抖和节流就是为了解决这个问题 防抖: 实现的场 ...

  7. 前端战五渣学JavaScript——防抖、节流和rAF

    看了<JavaScript高级程序设计>和网上的一些博客,感觉对函数节流和函数防抖的概念是反的,以下我写的关于防抖和节流的概念取决于多数人的概念吧,并且基于伦敦前端工程师David Cor ...

  8. 前端百题斩【021】——通俗易懂的防抖与节流

    写该系列文章的初衷是"让每位前端工程师掌握高频知识点,为工作助力".这是前端百题斩的第21斩,希望朋友们关注公众号"执鸢者",用知识武装自己的头脑. 性能一直是 ...

  9. 前端基础-防抖和节流

    大家好,我是龙骑士,今天给大家讲一下前端基础:防抖和节流 防抖 高频事件触发后, n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算冷却时间 节流  高频事件n 秒内,函数不论触发 ...

最新文章

  1. 对‘初学者应该选择哪种编程语言’的回答——计算机达人成长之路(38)
  2. 8.QT的事件循环与事件发送相关类
  3. php定界符EOF讲解
  4. 天津春考计算机重点知识,天津春考第一学期期中试卷(计算机基础)
  5. 双重ScrollView,RecyclerView联动实例
  6. 背水一战 Windows 10 (55) - 控件(集合类): SemanticZoom, ISemanticZoomInformation
  7. 卸载nginx php mysql_ubuntu16.04彻底删除nginx+php
  8. ERP核心业务流程和Oracle-ERP业务和数据对象分析
  9. C#遍历文件夹下所有文件
  10. VC2013 ArcGIS Engine 10.0开发环境搭建
  11. 厦门大学考研:必知20大时间节点
  12. ajax调用一般应用程序,【Web前端】---js调用本地应用程序
  13. Lavas 安装和项目构建
  14. 【WINDOWS / DOS 批处理】添加注释
  15. 三角波发生器电路原理分析
  16. unity将指定UI图片置为灰色
  17. stata两种方法查看命令源代码
  18. Solidity入门-开发众筹智能合约
  19. HB100多普勒雷达+STM32L476VGTx测速系统的电路设计(滤波放大比较器)
  20. 格力2代,原厂固件hola1.2.2

热门文章

  1. nsx很可爱的公众号 vSAN 文章合集
  2. VMware ESXi 6.X Syslog日志配置
  3. 消息中间件学习总结(20)——主流MQ比较及MQ常见使用场景总结
  4. Linux学习总结(49)——应当竭力避免在系统中运行的 Linux 命令
  5. Java基础学习总结(58)——JAVA堆、栈详解
  6. FastDFS学习总结(2)--Tracker与Storage配置详解
  7. python用http协议传数据_《Python网络爬虫》1.3 HTTP协议基础知识
  8. “为什么中国没有Apache基金会这样的组织?”
  9. 2018最有影响力的CRM系统排行榜
  10. JavaScript高级程序设计学习(二)之基本概念