JS系列之防抖节流

everfight 发布于2019-08-23 14:40 / 636人阅读

摘要：概念函数节流和函数防抖，两者都是优化高频率执行代码的一种手段。函数节流与函数防抖都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。节流指定时间间隔内，只会执行最后一次任务。

概念

函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。

函数节流（throttle）与函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

函数节流（throttle）

函数节流是指一定时间内执行的操作只执行一次，也就是说即预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。
节流：指定时间间隔内，只会执行最后一次任务。

function debounce(fn, wait) {   
    var timeout = null;   
    return function() {       
        if(timeout !== null) clearTimeout(timeout);       
        timeout = setTimeout(fn, wait);   
    }
}
// 处理函数
function handle() {   
    console.log(Math.random());
}
// 滚动事件
window.addEventListener("scroll", debounce(handle, 1000));

函数防抖（debounce）

函数防抖是指在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次，也就是说当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间，所以短时间内的连续动作永远只会触发一次。
防抖：指定时间间隔内，只会执行第一次任务。

时间戳

var throttle = function(func, delay) {           
    var prev = Date.now();           
    return function() {               
        var context = this;               
        var args = arguments;               
        var now = Date.now();               
        if (now - prev >= delay) {                   
            func.apply(context, args);                   
            prev = Date.now();               
        }           
    }       
}       
function handle() {           
    console.log(Math.random());       
}       
window.addEventListener("scroll", throttle(handle, 1000));

定时器

var throttle = function(func, delay) {
    var timer = null;
    return function() {
        var context = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(function() {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}
function handle() {
    console.log(Math.random());
}
window.addEventListener("scroll", throttle(handle, 1000));

GPU云服务器云服务器 VUE防抖与节流 js函数节流防抖 VUE防抖

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100964.html

scroll优化之防抖与节流

摘要：这个优化方案是参照前端性能高性能滚动及页面渲染优化在这里简单的把两个方式写出来，以便快速了解。。这个优化方案是参照【前端性能】高性能滚动 scroll 及页面渲染优化在这里简单的把两个方式写出来，以便快速了解。。第一种：防抖（也就是滚动结束才执行）演示：showImg(https://segmentfault.com/img/bVG5f5?w=448&h=340); 闭包： ...

littleGrow 2019-08-22 10:45 评论0 收藏0
JS系列之目录

摘要：设计模式资源整理操作符小知识点实现发邮件功能数据结构与算法资源整理跨域函数的合成与柯里化系列之防抖节流系列之正则系列之系列之系列之编码系列之系列之操作符对象中的坐标检测对象或数组系列之机制系列之构造对象系列之总结系列之浅复制与深复制系列之对 Javascript设计模式资源整理JS操作符JS小知识点JS实现发邮件功能数据结构与算法资源整理跨域函数的合成与柯里化JS系列之防抖节流JS系列...

AaronYuan 2019-08-23 14:39 评论0 收藏0
彻底弄懂函数防抖和函数节流

摘要：若时间差大于间隔时间，则立刻执行一次函数。不同点函数防抖，在一段连续操作结束后，处理回调，利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。原博客地址，欢迎star 函数防抖和节流函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 评论0 收藏0
前端进击的巨人（八）：浅谈函数防抖与节流

摘要：隆重请出主角防抖与节流。防抖与节流的异同相同都是防止某一时间段内，函数被频繁调用执行，通过时间频率控制，减少回调函数执行次数，来实现相关性能优化。参考文章分钟理解的节流防抖及使用场景函数防抖和节流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇课题，或许早已是烂大街的解读文章。不过春招系列面试下来，不少伙伴们还...

_Zhao 2019-08-23 15:37 评论0 收藏0
性能-防抖和节流

摘要：一概述为了提高页面性能，有时需要对高频率触发的事件进行防抖或者节流处理。强调一系列连续触发的事件。防抖的目的就是把，，构成的系列或者，构成的系列事件合并成一个，即只执行或者或者。节流一段时间内的事件，只处理一次，即只调用一次事件处理程序。一、概述为了提高页面性能，有时需要对高频率触发的事件（scrllo, resize, mousemove, touchmove）进行防抖（Debo...

zhjx922 2019-08-20 17:43 评论0 收藏0