JS面试系列之防抖

小河马游六花

已于 2022-07-19 17:08:55 修改

阅读量431

点赞数

分类专栏：手写文章标签： javascript 面试前端

于 2022-01-19 21:02:14 首次发布

本文链接：https://blog.csdn.net/weixin_41198447/article/details/122589170

版权

手写专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.什么是防抖？

答：防抖是针对响应跟不上触发频率这类问题的一种解决方案（另一种是节流）。

2.为什么需要防抖？

答：一些高频的函数操作比如resize，input，scroll， mousemove可能产生不好的影响，例如事件执行一次就要调用一次ajax。

// 举个栗子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>debounce</title>
</head>
<style>
    #box {
        width: 100%;
        height: 300px;
        background-color: #eee;
        color: red;
        font-size: 30px;
        text-align: center;
        font-weight: 700;
        line-height: 300px;
    }
</style>
<body>
<div id="box"></div>
<script>
    var count = 1;
    var oBody = document.getElementById('box');
    function getUserAction() {
        oBody.innerHTML = count++;
    }
	// 鼠标的移动事件会高频出发某个事件（该事件可能是一个很耗性能的操作）
    oBody.addEventListener('mousemove', getUserAction, false)
</script>
</body>
</html>

3.防抖的原理是什么？

答：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

4.怎么实现防抖？

// 第一版的防抖
// 当前getUserAction 的this 指向是window 
 oBody.addEventListener('mousemove', firstDebounce(getUserAction, 1000), false)
function firstDebounce(func, delay) {
    var timer = null;
    return function () {
        timer && clearTimeout(timer)
        timer = setTimeout(func, delay)
    }
}

// 第二版的防抖
// 尝试修改this指向 getUserAction不能传参
oBody.addEventListener('mousemove', secondDebounce(getUserAction, 1000), false)
function secondDebounce(func, delay) {
    let timer = null;
    return function() {
        let context = this;

        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            func.apply(context)
        },delay)
    }
}

// 第三版的防抖
// 修改argments
oBody.addEventListener('mousemove', thirdDebounce(getUserAction, 1000), false)
function thirdDebounce(func, delay) {
    let timer = null
    return function () {
        let context = this
        let args = arguments

        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            func.apply(context, args)
        }, delay)
    }
}

5.平常开发的应用场景

搜索框输入关键字

频繁的点击按钮

监听浏览器滚动事件

小河马游六花

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JS面试系列之防抖

1.什么是防抖？答：防抖是针对响应跟不上触发频率这类问题的一种解决方案（另一种是节流）。2.为什么需要防抖？答：一些高频的函数操作比如resize，input，scroll， mousemove可能产生不好的影响，例如事件执行一次就要调用一次ajax。// 举个栗子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="
复制链接

扫一扫