摘要:概念函数节流和函数防抖,两者都是优化高频率执行代码的一种手段。函数节流与函数防抖都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。节流指定时间间隔内,只会执行最后一次任务。
概念
函数节流和函数防抖,两者都是优化高频率执行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));
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/100964.html
摘要:这个优化方案是参照前端性能高性能滚动及页面渲染优化在这里简单的把两个方式写出来,以便快速了解。。 这个优化方案是参照 【前端性能】高性能滚动 scroll 及页面渲染优化 在这里简单的把两个方式写出来,以便快速了解。。 第一种:防抖(也就是滚动结束才执行) 演示:showImg(https://segmentfault.com/img/bVG5f5?w=448&h=340); 闭包: ...
摘要:若时间差大于间隔时间,则立刻执行一次函数。不同点函数防抖,在一段连续操作结束后,处理回调,利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次,而函数节流侧重于一段时间内只执行一次。 原博客地址,欢迎star 函数防抖和节流 函数防抖和函数节流:优化高频率执行js代码的一种手段,js中的一些事件如浏览器的resize、scroll,鼠标的mousemove、mouseover...
摘要:隆重请出主角防抖与节流。防抖与节流的异同相同都是防止某一时间段内,函数被频繁调用执行,通过时间频率控制,减少回调函数执行次数,来实现相关性能优化。参考文章分钟理解的节流防抖及使用场景函数防抖和节流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇课题,或许早已是烂大街的解读文章。不过春招系列面试下来,不少伙伴们还...
阅读 788·2021-09-07 09:58
阅读 2643·2021-08-31 09:42
阅读 2806·2019-08-30 14:18
阅读 3052·2019-08-30 14:08
阅读 1805·2019-08-30 12:57
阅读 2726·2019-08-26 13:31
阅读 1229·2019-08-26 11:58
阅读 1023·2019-08-23 18:06