throttle-debounce使用noTrailing报错callback.apply is not a function——解决

最新推荐文章于 2025-03-30 19:35:29 发布
最新推荐文章于 2025-03-30 19:35:29 发布
阅读量836 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： JavaScript学习日志 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42566993/article/details/128092871
本文讲述了在Vue项目中尝试使用throttle-debounce插件进行按钮节流处理时，遇到关于noTrailing选项的误解和调整过程，详细解释了参数格式的变化和解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在vue项目中使用 throttle-debounce 插件，需要对按钮做节流处理（多次点击只请求一次，且最后一次不执行），然后用了 throttle，代码如下：

throttle(3000, true, function() {
 //...
})

因为看到throttle使用介绍是这样的，如下图：
在这里插入图片描述但是这样使用noTrailing报错，callback.apply is not a function
在这里插入图片描述
于是查看报错位置：
在这里插入图片描述
发现其参数格式不是throttle(delay, noTrailing, callback, debounceMode)，而是 throttle(delay, callback, options)，这个options里面才包含noTrailing和debounceMode。

于是，修改代码如下：

throttle(3000, function() {
 //...
}, { noTrailing: true })
防抖与节流：前端性能优化核心技巧新手入门指南|防抖与节流完全指南：从概念到实战记忆技巧|新手必会的性能优化技巧，轻松区分与记忆方法|一文搞懂前端防抖与节流：告别傻傻分不清！
南北极之间
04-22 359
考虑因素选择防抖选择节流响应顺序需要最后一次操作需要均匀间隔的响应执行频率不关心执行次数需要控制最低执行频率连续性需求不连续（如保存）需要连续性（如动画）防抖（Debounce），其实就是“抖动防止器”。它的核心思想是在事件被频繁触发时，只在事件停止触发一段时间后，才执行对应的回调函数。通俗理解：假如你在打字，防抖就是等待你停止打字一段时间（比如500ms），如果在这段时间内你又开始打字，计时会重新开始，直到连续一段时间没有输入，才执行搜索请求等操作。节流（Throttle）
手写实现函数方法之 call、apply、bind、节流与防抖
浮生离梦的博客
08-22 356
一、call 方法 call，语法为 call(fn, obj, ...args)，功能为执行 fn，使 this 为 obj，并将后面的 n 个参数传给 fn，等同于函数对象的 call 方法。 call 的实现，代码如下所示： export function call (Fn, obj, ...args) { // 判断 if (obj === undefined || obj === null) { obj = globalThis; // 全局对象 } // 为 obj
js-throttle-debounce:一个 javascript 原型插件提供了节流和去抖动方法
06-24
js-油门去抖动 一个 javascript 原型插件提供了节流和去抖动方法。 这是指 下载 安装 您还可以使用 Bower 安装 js-throttle-debounce。 bower install js-throttle-debounce 对于 node.js，你可以使用这个命令来安装： npm install js-throttle-debounce 演示 用法 你可以这样使用：JavaScript function yourMethod ( ) { // ... } var throttle = yourMethod . throttle ( ) ; var throttleIgnoreLast = yourMethod . throttle ( 500 , true ) ; var debounce = yourMethod . debounce ( 10
【备忘录】使用eventHub非父子组件通信，报TypeError: cbs[i].apply is not a function
weixin_30670925的博客
04-23 256
Vue.prototype.$eventHub = new Vue(); this.$eventHub.$emit('update:someValue', this.myValue); this.$eventHub.$on('update:someValue', arg => this.wrapperValue = arg); 参考：https://stackoverflo...
关于Vue项目中js报错callback() is not a function
xiao_bai_12138的博客
03-16 5769
关于Vue项目中js报错callback() is not a function 原函数： 解决后： 即在参数中加入了rule，虽然rule都没有使用，但确实是解决了callback() is not a function
nodejs中关于回调函数的应用遇到callback is not a function的解决方法
热门推荐
liangwenli_的博客
04-25 3万+
最近在学习nodejs这个服务端开发平台的知识点。一边根据文档学习，一边在写几行测试代码实现有助于了解，在学到回调函数的时候却遇到了callback is not a function的问题。按理说我按照文档代码写的，应该不会出错的，下面是我一开始的时候的代码单纯为了看效果: function doSomething(args, callback) { somethingComplicat...
引用elementui是报错Cannot find module ‘throttle-debounce/debounce
rideClound的博客
10-21 1717
引用elementui是报错Cannot find module 'throttle-debounce/debounce引用elementui是报错Cannot find module 'throttle-debounce/debounce最终的解决方案 引用elementui是报错Cannot find module 'throttle-debounce/debounce 最近同事在引用elementui时候报这个错 当时也搞不懂为什么会这样，之前都是好好的呀，怎么会报这种奇怪的错误， 2.于是网上
在vue项目使用防抖、节流
mrjimin的博客
05-18 576
  这是我的目录结构，在utils文件夹下面创建common.js，这个文件我用来存放一些常用的函数、方法等等，暂时先添加了防抖、节流函数。   当然这个也不一定就要放在utils文件夹下面，引入的时候，引入对应的文件路径就行 common.js /** * @function 防抖函数，规定时间内点击多次，只执行最后一次 * @method debounce(callback,wait); * @param {function} callback 需要执行的函数 * @param {
JS-防抖和节流
Jenny_ljj的博客
12-02 551
现实中使用场景也挺多，比如搜索框，滚动条，及时保存…使用防抖和节流可以优化性能 防抖(debounce) 首先以搜索框为例： 为了防止接口频繁调用，如果在规定时间内没有再次触发事件，就执行函数；如果规定时间内再次触发，那么当前计时取消，重新开始计时。 效果：如果短时间内大量触发同一个事件，只会执行一次函数 <template> <div class="about"> <el-autocomplete v-model="state" :fetch-su.
函数防抖(debounce)实现方案全解
最新发布
monk all the way
03-30 514
防抖(debounce)是一种事件触发频率控制技术，指在事件被触发后再执行回调，若在等待时间内事件，确保连续快速触发时只执行最后一次。
vue以组件或者插件的形式实现throttle或者debounce
10-16
主要介绍了vue以组件或者插件的形式实现throttle或者debounce，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
TypeError: handler.apply is not a function 解决方法
qq_56088882的博客
03-10 1974
因为我@click绑定了一个事件，事件的名字和我在data中声明的变量名字冲突，导致vue认为我@click的是一个变量而不是方法。
防抖节流插件throttle-debounce
李剑一
03-21 1360
节流（Throttle）：当事件被连续触发多次时，只有第一次触发会立即执行，后续的触发会根据设定的时间间隔进行限制。 防抖（Debounce）：当事件被连续触发多次时，只有最后一次触发会生效，前面的触发将被取消。
debounce实现 js_Vue.js以组件或者插件的形式实现throttle或者debounce
weixin_39535701的博客
12-22 168
Vue.js以组件或者插件的形式实现throttle或者debounce发布于 2020-3-9|复制链接摘记: 需求在业务中，会碰到许多点击请求的情况，在请求前改变一个lock变量(在lock变回来之前，点击无效)，在请求回调中再改变lock.以确保在，请求回来之前，不会重复请求。或者类似的点击节流业务实现方式指令```xhtml指令//getData是函数名，a是传入的参数directives...
Web前端之JavaScript的防抖和节流插件、封装、防抖、节流、clearTimeout、setTimeout、exports、define、global、module、self
CSDN博客主页地址：https://mengjian.blog.csdn.net/
06-10 671
Web前端之JavaScript的防抖和节流插件、封装、防抖、节流、clearTimeout、setTimeout、exports、define、global、module、self
javascript中的throttle和debounce
weixin_30295091的博客
05-25 112
throttle 我们这里说的throttle就是函数节流的意思。再说的通俗一点就是函数调用的频度控制器，是连续执行时间间隔控制。主要应用的场景比如： 1.鼠标移动，mousemove 事件2.DOM 元素动态定位，window对象的resize和scroll 事件 有人形象的把上面说的事件形象的比喻成机关枪的扫射，throttle就是机关枪的扳机，你不放扳机，它就一直扫射。我们开发时用的上...
flutter的debounce_throttle插件使用
Wuxiaoming135的博客
03-05 367
【代码】flutter的debounce_throttle插件使用。
throttle-debounce 节流防抖
csstmg的博客
04-13 305
noTrailing 为 false 节流 会执行最后一次。
throttle((event) 获取不到scrollHeight
11-13
"throttle"通常是一个防抖（debounce）或节流（throttle）函数的术语，在前端开发中用于优化性能，防止在短时间内频繁触发某个操作。比如滚动事件，如果你不想在用户快速滚动页面时每滚动一次就执行一次耗时的操作（如发送网络请求），就可以对scroll事件应用throttle。 当你说"获取不到scrollHeight"时，这可能是由于以下几个原因： 1. 元素还未加载完成：`scrollHeight` 只有在元素完全渲染到浏览器视口中时才会返回正确的值。如果元素还在滚动过程中加载，可能会暂时无法获取到。 2. 错误的事件监听时机：你需要确保你在合适的生命周期阶段（如DOMContentLoaded或者window.onload）添加滚动事件监听。 3. 错误的函数引用：确保你是通过正确的DOM元素实例调用了`getScrollHeight()`方法，而不是直接在全局作用域下尝试获取。 要解决这个问题，你可以试试以下步骤： 1. 确保在DOM已经准备好的时候绑定事件： ```javascript window.addEventListener('DOMContentLoaded', function() { const element = document.getElementById('yourElement'); element.addEventListener('scroll', throttle(function() { // 在这里获取scrollHeight console.log(element.scrollHeight); })); }); ``` 2. 使用throttle函数包装你的回调： ```javascript function throttle(callback, delay) { let timeoutId; return function() { clearTimeout(timeoutId); timeoutId = setTimeout(() => callback.apply(this, arguments), delay); }; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

King's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值