那我们设置个 options 作为第三个参数,然后根据传的值判断到底哪种效果,我们约定:

leading:false 表示禁用第一次执行
trailing: false 表示禁用停止触发的回调

我们来改一下代码:

// 第四版
function throttle(func, wait, options) {
var timeout, context, args, result;
var previous = 0;
if (!options) options = {}; var later = function() {
previous = options.leading === false ? 0 : new Date().getTime();
timeout = null;
func.apply(context, args);
if (!timeout) context = args = null;
}; var throttled = function() {
var now = new Date().getTime();
if (!previous && options.leading === false) previous = now;
var remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
};
return throttled;
}


https://github.com/mqyqingfeng/Blog/issues/26

js防抖的更多相关文章

  1. 深入理解JS防抖与节流

    参考博客:JS防抖和节流,感谢作者的用心分享 日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为deb ...

  2. js防抖函数

    一.什么是函数防抖 概念:函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间. 举个栗子,坐电梯的时候,如 ...

  3. 因为它,我差点删库跑路:js防抖与节流

    前言 前端踩雷:短时间内重复提交导致数据重复. 对于前端大佬来说,防抖和节流的技术应用都是基本操作.对于"兼职"前端开发的来说,这些都是需要躺平的坑. 我们今天就来盘一盘js防抖与 ...

  4. 面试必问题:JS防抖与节流

    摘要:防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法~ 本文分享自华为云社区<JS防抖与节流快速了解与应用>,作者:北极光之夜. . 一.速识防抖: ...

  5. js防抖和节流

    今天在网上看到的,里面的内容非常多.说下我自己的理解. 所谓的防抖就是利用延时器来使你的最后一次操作执行.而节流是利用时间差的办法,每一段时间执行一次.下面是我的代码: 这段代码是右侧的小滑块跟随页面 ...

  6. 2019 面试准备 - JS 防抖与节流 (超级 重要!!!!!)

    Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 本文涉及知识点: 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 ...

  7. js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据

    防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如 ...

  8. JS 防抖函数和节流函数

    文章转载自:木上有水 什么是防抖?什么是节流? 工作中我们经常会用一些方法监听某些事件的完成,比如scroll.resize.keyup等. 常规事件触发的时候,比如scroll,会在短时间内触发多次 ...

  9. js 防抖 debounce 与 节流 throttle

    debounce(防抖) 与 throttle(节流) 主要是用于用户交互处理过程中的性能优化.都是为了避免在短时间内重复触发(比如scrollTop等导致的回流.http请求等)导致的资源浪费问题. ...

  10. JS防抖与节流函数封装

    防抖 在监听scroll事件的时候经常会用到防抖,当滚动到某一位置而触发状态,从而不会出现频繁滚动持续触发事件的情况 防抖的事件处理机制仅触发一次且必须是结束状态下才会执行 function debo ...

随机推荐

  1. python笔记2-数据类型:字符串常用操作

    这次主要介绍字符串常用操作方法及例子 1.python字符串 在python中声明一个字符串,通常有三种方法:在它的两边加上单引号.双引号或者三引号,如下: name = 'hello' name1 ...

  2. Bootstrap打印问题

    删除bootstrap的样式引用,就可以正常打印预览了. bootstrap 设置了@media print相关属性导致 @media print { * { color: #000 !importa ...

  3. js 代码优化 (写的可以)

    Javascript是一门非常灵活的语言,我们可以随心所欲的书写各种风格的代码,不同风格的代码也必然也会导致执行效率的差异,开发过程中零零散散地接触到许多提高代码性能的方法,整理一下平时比较常见并且容 ...

  4. Lenna图-莱娜·瑟德贝里

    莱娜·瑟德贝里(瑞典文:Lena Soderberg),1951年3月31日出生于瑞典,在1972年11月期的<花花公子>杂志中,她化名为莱娜·舍布洛姆,成为了当期的玩伴女郎. 她的中间折 ...

  5. java&javaweb学习笔记

    http://blog.csdn.net/h3243212/article/details/50659471

  6. Linux 系统时间设置

    from:https://blog.csdn.net/yjh314/article/details/51669238 今早看到一台机器时间对不上,本以为系统时间与网络北京时间不同步,就在终端命令执行网 ...

  7. 线段树lazy标记??Hdu4902

    Nice boat Time Limit: 30000/15000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) To ...

  8. Mininet加强版——DOT(分布式OpenFlow试验平台)

    前言 之前在做SDN实验的时候,需要用到包含2000+个交换机的fattree拓扑,当时用的是mininet,生成整个拓扑需要十五六个小时,最终在异常艰苦的环境下做完了实验,之后听说了有DOT(Dis ...

  9. postgresql常用

    postgresql 字符串转整数 int.integer --把'1234'转成整数 select cast('1234' as integer ) ; --用substring截取字符串,从第8个 ...

  10. 把 hhkb 压在mac pro上面用

    不知道你们有没有这种感觉, 用惯了外接键盘,然后切换到笔记本自带键盘的时候 手指会有不适应感? 直接 hhkb 放2018款的mac pro上总会压着原来的键盘, 而且我也不想直接禁用掉笔记本自带的键 ...