JS的去抖、节流
去抖(debounce)
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
function debounce(fn, delay) {
    let timer = null;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, delay)
        }, delay);
    }
}
表现:

节流(throttle)
规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
function throttle(fn, delay) {
    let last_time = Date.now() - delay;
    return function() {
        let now = Date.now();
        if (now - last_time < delay) {
            return;
        }
        last_time = now;
        fn.apply(this, arguments)
    }
}
表现:

区别:
  去抖和节流十分相似,不一样的是,如果短时间内不断触发:
    去抖:停止触发时才去执行
节流:只要过了delay,就会执行过了delay后的第一次触发
JS的去抖、节流的更多相关文章
- hover时显示可跟随鼠标移动的浮动框,运用函数节流与去抖进行优化
		
在很多笔试面试题中总能看到js函数去抖和函数节流,看过很多关于这两者的讨论,最近终于在一个需求中使用了函数去抖(debounce)和函数节流(throttle). 需要完成的效果是,鼠标在表格的单元格 ...
 - JS 函数节流和去抖
		
1.什么是节流和去抖? 节流.就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不多流满一 ...
 - js 函数节流throttle 函数去抖debounce
		
1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...
 - (转)JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce)
		
JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce) 函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过 ...
 - 浅析 JavaScript 的函数节流和去抖
		
现代网页的实现上,会有很多交互上的优化,比如常见的 滚动加载 ,输入联想 等等.他们的实现思路很简单,以滚动加载而言,无非就是去是增加一个滚动的事件监听,每次滚动判断当前的元素是否已经滚动到了用户的可 ...
 - JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
		
函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用. 函数节流的原理挺简单的,估计大家都想到了,那就是定时器.当我 ...
 - 节流(Throttling)和去抖(Debouncing)详解
		
这篇文章的作者是 David Corbacho,伦敦的一名前端开发工程师.之前我们有一篇关于”节流”和”去抖”的文章:The Difference Between Throttling and Deb ...
 - JavaScript 中函数节流和函数去抖的讲解
		
JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...
 - JavaScript-性能优化,函数节流(throttle)与函数去抖(debounce)
		
我在写一个类似百度搜索框的自动提示功能时候,使用了AJAX+keydown事件.调试时候我发现,当在搜索框中输入文字的时候,控制台在不停发送AJAX.这在本地服务器测试还好,如果我把它拿到运行环境,很 ...
 
随机推荐
- Python笔记-IO编程
			
IO在计算机中是指input和output(数据输入与输出),涉及到数据交换(磁盘.网络)的地方就需要IO接口. 输入流input stream是指数据从外面(磁盘.网络服务器)流入内存:输出流out ...
 - JVM内存结构,运行机制
			
三月十号,白天出去有事情出去了一天,晚上刚到食堂就接到阿里电话, 紧张到不行,很多基础的问题都不知道从哪里说了orz: 其中关于JVM内存结构,运行机制,自己笔记里面有总结的,可当天还是一下子说不出来 ...
 - PM意识升级2.0
			
上一篇<质量:“PM,你怎么可以放弃我?!”>,我们匡正了PM的一个意识:质量是PM的底线和目标,也算是PM意识升级的1.0.同时提出,只有“正确的做正确的事”才是保证质量,且成本相对最低 ...
 - MySQL 关于性能的参数配置梳理
			
以下List是我们常见的MySQL参数配置,这个参数对提高实例的性能大有裨益. 其中 建议设置值,仅供参考,需要根据自己的业务场景和硬件资源仔细推敲. 参数 设置说明 建议设置值 lower_case ...
 - WinForm -- 为TextBox文本框添加鼠标右键菜单
			
WinForm -- 为TextBox文本框添加鼠标右键菜单 1. 新建一个WinForm项目,放置一个TextBox控件 2. 从工具箱拖进来一个ContextMenuStrip 3. 将TextB ...
 - Ruby入坑指南
			
1.1 简介 Ruby语言是由松本行弘(Matz)设计,是一门通用的.面向对象的.解释型语言. 1.2 Ruby?RUBY?ruby? 1.Ruby:用来表示编程的语言 2.ruby:是指一个计算机程 ...
 - Vue-cli在webpack内使用雪碧图(响应式)
			
先执行install cnpm install webpack-spritesmith 文件位置 build\webpack.dev.conf.js 添加内容: const SpritesmithPl ...
 - 好程序员分享该如何选择background-image和img标签
			
好程序员分享该如何选择background-image和img标签,用img标签 如果你希望别人打印页面时候包含这张图片请使用img标签 当这张图片有非常有意义的语义,比如警告图标,请使用img标签及 ...
 - mysql jdbc 官方编程示例
			
/* Basic example of an application using JDBC API of Connector/C++ */ /* Standard C++ includes */ #i ...
 - java易混淆知识小结
			
1.java的基本数据类型,及所占字节和范围 byte: 字节型,占1个字节,8位,范围是 -2^7 ~ 2^7-1 short:短整型,占2个字节,16位,范围是 -2^15 ~ 2^15 ...