千锋教育-做有情怀、有良心、有品质的职业教育机构

400-811-9990
手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

上海
  • 北京
  • 郑州
  • 武汉
  • 成都
  • 西安
  • 沈阳
  • 广州
  • 南京
  • 深圳
  • 大连
  • 青岛
  • 杭州
  • 重庆
当前位置:长沙千锋IT培训  >  面试技巧  >  长沙IT培训程序员面试题:函数防抖节流

长沙IT培训程序员面试题:函数防抖节流

来源:千锋教育
发布人:千锋长沙
时间: 2021-03-19 15:57:44

        相信对很多在千锋长沙IT培训的小伙伴来说面试是个不小的问题,但是千锋长沙的老师们都有给大家准备长沙IT培训程序员面试题,下面给大家说一下函数防抖节流:

u=221025116,2065475284&fm=26&gp=0

        在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。

        举例:工作中的话像我们有的项目中会有页面懒加载、下拉刷新等效果。那么问题来了~ 在用户网慢或者手机卡顿的时候,怎样阻止客户重复请求数据呢?这时候就需要我们的防抖和节流...

        先简单说下什么是防抖和节流:

        函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。简单来说防抖就是:任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行。

防抖函数分为非立即执行版和立即执行版。
underscorejs.org js类库(提供很多项目中)

代码实现:

/*
*
* 函数的防抖(debounce):不是某个事件触发就去执行函数,而是在指定的时间间隔内,
* 执行一次,减少函数执行的次数
* */

/*
* debounce:函数防抖
* @params
* func:要执行的函数
* wait:间隔等待时间
* immediate:在开始边界还是结束边界触发执行(true=>开始边界)
* @return
* 可被调用的函数
* */
function debounce(func, wait, immediate) {
let result = null,
timeout = null;
return function (...args) {
let context = this,
now = immediate && !timeout;
clearTimeout(timeout); //=> 重要:在设置新的定时器之前,我们要把之前设置的定时器都干掉,因为防抖
的目的是等待时间内,只执行一次
timeout = setTimeout(() => {
timeout = null;
if (!immediate) result = func.call(context, ...args);
}, wait);
if (now) result = func.call(context, ...args);
return result;
}
}

        复制代码函数节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水,阀门一打开,水哗哗的往下流,秉着勤俭节约的优良传统美德,我们要把水龙头关小点,如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。

        所谓节流就是:指连续触发事件但是在 n 秒中只执行一次函数。 节流会稀释函数的执行频率。对于节流,一般有两种方式可以实现,分别是时间戳版和定时器版。代码实现:

/*
* 函数的节流(throttle):为了缩减执行的频率,但不像防抖一样,一定时间内只能执行一次,
* 而是一定时间内能执行多次
*
**/

/*
* throttle:函数节流是为了缩减执行频率,当达到了一定的时间间隔就会执行一次
* @params
* func:需要执行的函数
* wait:设置的间隔时间
* @return
* 返回可被调用的函数
* */
let throttle = function (func, wait) {
let timeout = null,
result = null;
previous = 0; //=> 上次执行的时间点
return function (...args) {
let now = new Date,
context = this;
//=> remaining小于等于0,表示上次执行至此所间隔时间已经超过一个时间间隔
let remaining = wait - (now - previous);
if (remaining <= 0) {
clearTimeout(timeout);
previous = now;
timeout = null;
result = func.apply(context, args);
} else if (!timeout) {
timeout = setTimeout(() => {
previous = new Date;
timeout = null;
result = func.apply(context, args);
}, remaining);
}
return result;
};

};

        复制代码区别:函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。

        本套学习内容由千锋长沙IT培训班韦老师撰写,版权归千锋教育学院所有,欢迎转载,转载请注明作者出处。谢谢!


声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

猜你喜欢LIKE

最新文章NEW

相关推荐HOT

更多>>

快速通道 更多>>

最新开班信息 更多>>

网友热搜 更多>>