JavaScript实现函数防抖的问题

代码在下面

不是不明白this的指向,而是不太明白debounce代码里面显式指定this的意义

写了个小demo测试,先贴上HTML代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            height: 150vh;
        }
        
        div#container {
            width: 300px;
            height: 500px;
            border: 1px solid #ccc;
            overflow: auto;
        }
        
        .content {
            width: 100%;
            height: 800px;
            background: palevioletred;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="content"></div>
    </div>
    <script src="debounce.js"></script>
</body>

</html>

下面是debounce的代码:

图片描述

阅读 3.4k
2 个回答

我很欣赏你贴 HTML 代码的态度,但为毛就不把 JavaScript 代码也贴出来呢?图示是图示,不影响贴代码嘛,毕竟拷贝代码比重新敲容易啊!

fn.apply(context, args)

这里做了两件事情,一是绑定 fn 调用时候的 this 指向,二是以数组(或伪数组)的形式传递参数列表。

为什么需要 context = this,注意到 setTimeout 的第一个参数是一个 funciton,在里面的 this 并不是外面 context 赋值的那个 this——如果不明白,去看看JavaScript的this指向问题尝试解析。当然,如果用 es6 语法,可以用箭头函数来解决。

这里 fn 作为一个回调,设计者是希望用户能在回调中通过 this 来使用上下文对象,这样可以少引入一个参数。

你现在仅仅是log一点东西出来,自然感觉不到显式绑定this的作用,如果让你操作一些当前滚动元素的属性,是不是this用处就比较大了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题