为什么这个去反跳函数会破坏" this "？
去反跳函数（Debounce Function）是一种常用的前端开发技术，用于限制某个函数在短时间内被频繁触发的情况。它通过延迟执行函数来提高性能和用户体验。然而，如果在实现去反跳函数时不小心处理"this"关键字，可能会导致"this"的指向发生错误，从而破坏代码的正确性。
在JavaScript中，函数的执行上下文（execution context）决定了"this"关键字的指向。而在去反跳函数中，为了实现延迟执行，通常会使用setTimeout或者setInterval函数来设置一个定时器。在定时器回调函数中，由于函数的执行上下文发生了改变，"this"关键字的指向也会发生变化。
具体来说，当使用去反跳函数时，如果原始函数中使用了"this"关键字来引用当前对象或者调用对象的方法，那么在去反跳函数中，"this"关键字将不再指向原始函数所期望的对象，而是指向全局对象（在浏览器环境中通常是window对象）或者undefined。
这种情况下，如果在去反跳函数中需要使用"this"关键字，可以采取以下几种解决方案：
- 使用箭头函数：箭头函数不会改变函数的执行上下文，它会继承外部函数的上下文。因此，可以将去反跳函数定义为箭头函数，确保"this"关键字指向正确的对象。
- 使用bind方法：可以使用bind方法将原始函数绑定到指定的上下文对象上，生成一个新的函数。这样，在去反跳函数中调用绑定后的函数时，"this"关键字将指向绑定的对象。
- 保存this引用：在原始函数中，可以将当前的"this"关键字保存到一个变量中，在去反跳函数中使用该变量来引用正确的对象。
总之，去反跳函数会破坏"this"关键字的指向，因为函数的执行上下文发生了改变。为了避免这个问题，可以使用箭头函数、bind方法或者保存this引用的方式来确保"this"关键字指向正确的对象。
腾讯云相关产品和产品介绍链接地址：
- 云函数（Serverless Cloud Function）：https://cloud.tencent.com/product/scf
- 云开发（Tencent Cloud Base）：https://cloud.tencent.com/product/tcb
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
- 物联网平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
- 移动开发平台（MPS）：https://cloud.tencent.com/product/mps
- 对象存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（Tencent Blockchain）：https://cloud.tencent.com/product/tbc
- 腾讯元宇宙（Tencent Metaverse）：https://cloud.tencent.com/solution/metaverse
相关·内容
我创建了一个去抖动实用函数： let timeout const context$emit('updateField', fieldName, value, schema)}, 500),Uncaught TypeError: _this.$emit is not a function
浏览 17提问于2017-06-26得票数 1
回答已采纳
我有以下从输入文本字段上的keyPress侦听器调用的函数。_.debounce()工作正常，只不过它不是在该时间段后仅触发函数1次，而是与keyPress事件发生的次数一样多次。;有没有办法将_.debounce函数限制为在该时间段后仅触发一次？
浏览 2提问于2015-07-27得票数 2
1回答
但在下面的代码中，我希望能够多次单击此按钮，然后仅触发该函数一次。我尝试使用setTimeout，但函数在延迟后仍会多次触发。
浏览 21提问于2021-07-31得票数 0
我不能在我的react本机组件中使用jest来测试包含去反跳函数的方法。有人能帮我一下吗？ expect(debounce).toHaveBeenCalledTimes(1);下面的代码片段是我的方法，它包含了我正在尝试测试的lodash的去反跳函数
浏览 4提问于2019-09-05得票数 1
1回答
我正在我的应用程序的数据表中实现一个搜索功能。为此，我找到了一个教程，在那里我可以添加debounceTime，这样搜索就不会立即发生(在我的示例中是150毫秒)。我问的原因是，当我将去抖动时间从150毫秒更改为0时，搜索看起来更流畅和“更好”。 fromEvent(this.filter.nativeElement, 'keyup') takeUntil(t
浏览 22提问于2019-07-09得票数 1
回答已采纳
我正在进入从rxjs开始的函数式反应式代码，并对如何最好地导入它有一些问题，因为我得到的结果喜忧参半。 });这一切都很好用，但是当我尝试添加像submission.debounce(500).concatMap((用户名) =>这样的去弹出时这是否可能是去反跳不起作用的原因(没有完整的库)？
谢谢!
浏览 4提问于2018-07-20得票数 1
回答已采纳
3回答
我有一个带有用户名输入的表单，我正在尝试验证用户名是否在去抖动函数中使用。我遇到的问题是，当我键入"user“时，我的去弹似乎不起作用，我的控制台看起来像ususerexport function debounce(func, wait} console.log(state.username)
},
浏览 0提问于2020-05-14得票数 28
回答已采纳
2回答
希望这个标题是正确的:)(function (vvv, $, undefined) { });}( jQuery我还使用了提供的去反跳函数wait);
if (callNow) func.apply(context,
浏览 2提问于2015-08-17得票数 1
2回答
有没有办法做像这样的事情 fetch = _.debounce(...) {}
我需要有一个类方法别名给lodash去反跳函数。
浏览 1提问于2016-11-08得票数 3
1回答
document).ready(function(){我已经测试了Ajax函数本身但是使用我在一些谷歌搜索中找到的去抖动功能，它不会触发任何东西。帮助!
浏览 0提问于2013-01-16得票数 1
我有一个函数，每当模型改变时都会调用它。我想在modelChange函数中使用去抖动函数。 onModelChange(model) { alert('debouned');
}
浏览 18提问于2019-03-31得票数 1
回答已采纳
1回答
我在componentDidMount中使用了一个debounce函数，如下所示： ...我是否需要以另一种方式模拟去抖动功能？
浏览 14提问于2019-05-08得票数 0
我正在尝试使用一个去反跳函数来限制所调用的滚动事件的数量。 我不知道为什么这根本不起作用。 有什么想法吗？
浏览 6提问于2019-10-13得票数 1
回答已采纳
我编写了一个去反跳函数，并希望使用该函数显示输入。debounce(display, 2000)但是像这样工作：为什么
浏览 21提问于2021-03-01得票数 0
我尝试将滑块值发送给ajax函数，但我只需要最后一个值。如何获取要在ajax函数上发送的最后一个值？
谢谢。
浏览 1提问于2014-08-04得票数 2
假设我在键盘上打字，我想在用户停止在键盘上打字时调用该函数。我不想在用户每次按下键盘按钮时都调用函数，因为我的函数计算某事，而我的浏览器冻结了。$scope.$apply();});
我试过上面的代码，但是这个函数会在1500毫秒后被调用。
浏览 2提问于2015-06-29得票数 0
下划线库提供了一个去反跳函数，该函数可防止在设定的时间段内多次调用一个函数。他们的版本使用了setTimeout。
我们如何在纯AngularJS代码中做到这一点呢？此外，我们是否可以利用$q风格的promises在去抖动期间之后从被调用函数中检索返回值？
浏览 0提问于2012-11-10得票数 49
回答已采纳
问题是，当用户点击x次时，他会跳过x个屏幕。有什么建议吗？
goToNextRoute = (queryParams?
浏览 3提问于2021-09-03得票数 0
2回答
我正在处理的任务中，每次用户滚动屏幕或调整屏幕大小时，我都想重新计算元素的css属性。<div class='progress-bar-wrap'></div>
this.progressIndicator.css('width', this.calculateProg
浏览 0提问于2018-11-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
