面试经常会被问到的节流和防抖,一分钟理解

时间:2020-9-3 作者:admin


导语:
最近整理面试题目,经常能够看到手写节流和防抖函数,已经它们的用处。一分钟学会它们。

微信搜索 【web小馆】,回复 ”全栈博客项目“,即可获取 项目源码和后续的实战文章教程

这里写目录标题

一,防抖

1,定义和原理

  • 定义:防抖,即如果短时间内大量触发同一事件,都会重置计时器,等到事件不触发了,再等待规定的事件,才会执行函数。

(举个简单的例子,就是如果你在我这篇博文疯狂点赞再取消赞,这个过程都会把计时器清空,等到你点累了不点了,等待0.5秒,才会触发函数,把你最终结果传给服务器。)而这整个过程就触发了一次点赞函数到服务器。

  • 原理:设置一个定时器,设置在规定的时间后触发事件处理,每次触发事件都会重置计时器。

2,用处

防抖用于搜索框和滚动的监听事件处理,如果没有防抖,那么每输入一个字或者滚动屏幕,都会触发事件,甚至一秒钟触发几十次,性能就会浪费。

function debounce(fn, delay = 500) {
    
    let timer = null

    return function () {
        if (timer) {
            clearTimeout(timer)			//如果timer有定义,清空
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

一,节流

1,定义和原理

  • 定义:每隔一段时间就执行一次。
  • 原理:设置一个定时器,设置0.5秒后执行事件,如果时间到了,就会执行函数并重置定时器,等待下一个0.5秒后再执行。

2,用处

滚动栏的位置查询,就能设置每0.5秒执行一次函数。

function throttle(fn, delay = 100) {
    let timer = null

    return function () {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

结语:

面试经常会被问到的节流和防抖,一分钟理解
建议收藏,不然刷着刷着就可能找不到了

有什么前端的问题欢迎私信我~期待你的到来。

同时你的点赞是对我最大的鼓励,谢谢。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。