摘要：函数节流的实现函数节流最普通的实现就是通过取摩操作来过滤部分执行。这样子，就实现了函数节流，存在复杂计算的业务逻辑运行次数减半了。实现又叫函数节流，思路是控制某一个时间段执行周期内触发的事件，只会执行一次业务逻辑。
函数节流介绍
页面在绑定resize，keydown或者mousemove这些能连续触发的事件时，用户只要很常规的操作，就能连续触发多次绑定的方法。当绑定方法里面存在大量的类似于DOM操作这种极其消耗性能的代码时，会直接导致页面运行的卡顿。这个时候就会用到函数节流。
函数节流的实现函数节流最普通的实现就是通过取摩操作来过滤部分执行。参考代码如下
javascriptvar mousemoveCount = 0;
function mousemoveListener(e){
mousemoveCount++;
if(mousemoveCount % 2 === 0){
return;
}
console.info("业务逻辑");
}
当第一次触发并执行mousemoveListener事件时，会打印“业务逻辑”；紧接着第二次执行mousemoveListener事件时，由于mousemoveCount为2，会直接return掉，并不会打印“业务逻辑”。这样子，就实现了函数节流，存在复杂计算的业务逻辑运行次数减半了。
但是这种实现存在两个问题：
方法的执行频率（或者说帧率）是不可控的。比如mousemove事件，执行频率由鼠标移动速度决定，由上面这种方式实现，频率还是由鼠标移动速度决定。
最后一次触发可能未执行。比如当最后一次触发事件时，mousemoveCount是偶数，那么会直接return。如果业务需要最后一次必须执行业务逻辑，则会存在bug。
所以就有了下面的优化实现(throttle和debounce)。
throttle实现throttle又叫函数节流，思路是控制某一个时间段(执行周期)内触发的事件，只会执行一次业务逻辑。代码如下：
javascriptvar lastMousemoveTime = 0, mousemoveTime = 100;
function mousemoveListener(e){
var now = new Date().getTime();
if(now - lastMousemoveTime <= mousemoveTime) {
return;
}
lastMousemoveTime = now;
setTimeout(function(){
console.info("业务逻辑");
}, mousemoveTime);
}
第一次触发mousemove会设置100ms后执行业务逻辑，在这之后的100ms里面触发的mousemove都不会触发业务逻辑。相当于控制了mousemove事件100ms触发一次，也就是10帧。
使用这种实现(throttle)，可以做到触发频率可控。但当业务希望连续的触发事件只在之后一次触发后才执行业务逻辑，比如resize事件，只希望窗口变化结束后才进行业务逻辑的运行，throttle实现就不适用了。这个时候就需要使用到debounce
debounce实现debounce又叫函数去抖动，思路是业务逻辑在resize不在触发后才执行。代码如下：
javascriptvar resizeTimer = null;
function resizeListener(e){
if(resizeTimer) {
clearTimerout(resizeTimer);
}
resizeTimer = setTimeout(function(){
console.info("业务逻辑");
}, 100);
}
但resize连续快速触发时，业务逻辑并不会执行。只有当最后一次触发resize后100ms，才执行业务逻辑。这种情况就能实现只在最后一次resize触发业务计算了。
underscore 中已经对throttle和debounce做了实现和封装， 有兴趣可以去查看源码。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85656.html
摘要：若时间差大于间隔时间，则立刻执行一次函数。不同点函数防抖，在一段连续操作结束后，处理回调，利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。 原博客地址，欢迎star 函数防抖和节流 函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover...
摘要：函数节流的原理函数节流的原理挺简单的，估计大家都想到了，那就是定时器。在高级程序设计一书有介绍函数节流，里面封装了这样一个函数节流函数，它把定时器存为函数的一个属性个人的世界观不喜欢这种写法。 什么是函数节流？ 介绍前，先说下背景。在前端开发中，有时会为页面绑定resize事件，或者为一个页面元素绑定拖拽事件（其核心就是绑定mousemove），这种事件有一个特点，就是用户不必特地捣乱...
摘要：函数节流和去抖的出现场景，一般都伴随着客户端的事件监听。函数节流的核心是，让一个函数不要执行得太频繁，减少一些过快的调用来节流。 概述 也是好久没更新 源码解读，看着房价蹭蹭暴涨，心里也是五味杂陈，对未来充满恐惧和迷茫 ...（敢问一句你们上岸了吗） 言归正传，今天要介绍的是 underscore 中两个重要的方法，函数节流和函数去抖。这篇文章不会涉及具体的代码实现（关于代码实现请期...
摘要：函数节流函数防抖函数节流和函数防抖函数节流和函数防抖二者很容易被混淆起来。函数防抖函数在特定的时间内不被再调用后执行。一句话概括函数节流是从用户开始输入就开始计时，而函数节流是从用户停止输入开始计时。 函数节流 & 函数防抖 函数节流和函数防抖 函数节流和函数防抖二者很容易被混淆起来。下面贴英文原文，建议认真阅读：Debouncing enforces that a function ...
摘要：为了解决这些问题，就可以使用定时器对函数进行节流。第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。 函数节流的目的 从字面上就可以理解，函数节流就是用来节流函数从而一定程度上优化性能的。例如，DOM 操作比起非DOM 交互需要更多的内存和CPU 时间。连续尝试进行过多的DOM 相关操作可能会导致浏览器挂起，有时候甚...
摘要：隆重请出主角防抖与节流。防抖与节流的异同相同都是防止某一时间段内，函数被频繁调用执行，通过时间频率控制，减少回调函数执行次数，来实现相关性能优化。参考文章分钟理解的节流防抖及使用场景函数防抖和节流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇课题，或许早已是烂大街的解读文章。不过春招系列面试下来，不少伙伴们还...
阅读 763·2023-04-25 19:35
阅读 2215·2021-11-22 09:34
阅读 3159·2021-10-09 09:44
阅读 1375·2021-09-22 15:25
阅读 2766·2019-08-29 14:00
阅读 3252·2019-08-29 11:01
阅读 2425·2019-08-26 13:26
阅读 1635·2019-08-23 18:08
