去抖(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的去抖、节流的更多相关文章

  1. hover时显示可跟随鼠标移动的浮动框,运用函数节流与去抖进行优化

    在很多笔试面试题中总能看到js函数去抖和函数节流,看过很多关于这两者的讨论,最近终于在一个需求中使用了函数去抖(debounce)和函数节流(throttle). 需要完成的效果是,鼠标在表格的单元格 ...

  2. JS 函数节流和去抖

    1.什么是节流和去抖? 节流.就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不多流满一 ...

  3. js 函数节流throttle 函数去抖debounce

    1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...

  4. (转)JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce)

     JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce)         函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过 ...

  5. 浅析 JavaScript 的函数节流和去抖

    现代网页的实现上,会有很多交互上的优化,比如常见的 滚动加载 ,输入联想 等等.他们的实现思路很简单,以滚动加载而言,无非就是去是增加一个滚动的事件监听,每次滚动判断当前的元素是否已经滚动到了用户的可 ...

  6. JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)

    函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用. 函数节流的原理挺简单的,估计大家都想到了,那就是定时器.当我 ...

  7. 节流(Throttling)和去抖(Debouncing)详解

    这篇文章的作者是 David Corbacho,伦敦的一名前端开发工程师.之前我们有一篇关于”节流”和”去抖”的文章:The Difference Between Throttling and Deb ...

  8. JavaScript 中函数节流和函数去抖的讲解

    JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...

  9. JavaScript-性能优化,函数节流(throttle)与函数去抖(debounce)

    我在写一个类似百度搜索框的自动提示功能时候,使用了AJAX+keydown事件.调试时候我发现,当在搜索框中输入文字的时候,控制台在不停发送AJAX.这在本地服务器测试还好,如果我把它拿到运行环境,很 ...

随机推荐

  1. (二)图数据neo4j基本认识

    1.neo4j介绍 Neo4j是由Java和Scala实现的开源NoSQL图数据库.自2003年开始研发,直到2007年正式发布第一版.Neo4j的源代码托管在GitHub上,技术支持托管在Stack ...

  2. oracle sql developer 出现 : 适配器无法建立连接问题解决方案 The Network Adapter could not establish the connection

    直接上图比较直观 tips one:先看看自己 控制台的 SQLplus 可以登录不 可以直接往下面走 ,如果不可以就现在服务里面找到 Oracle 开头的服务启动就好 实在不会可以百度 注:由于该步 ...

  3. nginx平滑升级(1.14--1.15)

    查看旧版nginx编译参数 [root@localhost yum.repos.d]# nginx -V nginx version: nginx/1.14.2 built by gcc 4.8.5 ...

  4. 试试Linux下的ip命令,ifconfig已经过时了

    linux的ip命令和ifconfig类似,但前者功能更强大,并旨在取代后者.使用ip命令,只需一个命令,你就能很轻松地执行一些网络管理任务.ifconfig是net-tools中已被废弃使用的一个命 ...

  5. CF396C On Changing Tree

    CF396C On Changing Tree 给定一棵以 \(1\) 为根的树,初始时所有点权为 \(0\) 有 \(m\) 次操作,分为两种 \(1\ u\ x\ k\) 表示给以 \(u\) 的 ...

  6. 开源 , KoobooJson一款高性能且轻量的JSON框架

    KoobooJson - 更小更快的C# JSON序列化工具(基于表达式树构建) 在C#领域,有很多成熟的开源JSON框架,其中最著名且使用最多的是 Newtonsoft.Json ,然而因为版本迭代 ...

  7. Colorful Bricks CodeForces - 1081C ( 组合数学 或 DP )

    On his free time, Chouti likes doing some housework. He has got one new task, paint some bricks in t ...

  8. c#使用资源文件完成国际化

    路径结构如下 namespace UnitTestProject1 { [TestClass] public class UnitTest1 { [TestMethod] public void Te ...

  9. jquery中关键字写错导致的错误——dataType写成dateType(data写成date)

    由于不会报错,会导致原本servlet后端传回的json字符串不能被正确解析为json格式,而只是显示为字符串. 具体错误表现为:在浏览器Console中显示为字符串,但是在json.cn中可以被正常 ...

  10. Centos7 IPv6 Route And Dhcpv6 Server(借鉴补充)

    软件:radvd.dhcp 1)启用ipv6 vi /etc/sysctl.conf net.ipv6.conf.all.disable_ipv6 = 0net.ipv6.conf.default.d ...