首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从setInterval调用时,Lodash去抖动不起作用

是因为setInterval会按照指定的时间间隔重复执行函数,而Lodash的去抖动函数debounce需要在一定的时间内连续调用才能生效。

Lodash的去抖动函数debounce可以用于限制函数的调用频率,当函数被连续调用时,只有在指定的时间间隔内没有新的调用时,函数才会被执行。这在一些需要限制频繁触发的事件处理中非常有用,比如输入框的自动补全、搜索框的实时搜索等。

然而,由于setInterval会按照指定的时间间隔重复调用函数,而不管函数是否已经执行完毕,因此无法满足Lodash的去抖动函数的要求。如果想要在setInterval调用时使用Lodash的去抖动函数,可以考虑使用setTimeout来替代setInterval,并在每次函数执行完毕后再次设置setTimeout。

以下是一个示例代码:

代码语言:txt
复制
function debounce(func, wait) {
  let timeout;
  
  return function() {
    const context = this;
    const args = arguments;
    
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      func.apply(context, args);
    }, wait);
  };
}

function myFunction() {
  console.log('Function called');
}

const debouncedFunction = debounce(myFunction, 1000);

setInterval(debouncedFunction, 500);

在上述示例中,我们使用了setTimeout来替代setInterval,并将Lodash的去抖动函数debounce应用于myFunction函数。每次myFunction函数被调用时,都会清除之前设置的timeout,并重新设置一个新的timeout。这样就可以实现在一定的时间间隔内连续调用myFunction函数时,只有在指定的时间间隔内没有新的调用时,函数才会被执行。

需要注意的是,以上示例中的debounce函数是一个简化版的实现,实际使用中可能需要考虑更多的细节和参数配置。另外,腾讯云提供了一系列云计算相关的产品,可以根据具体需求选择适合的产品进行开发和部署。具体的产品介绍和相关链接可以参考腾讯云官方网站。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JS函数节流和防抖的区分和实现详解

没到200ms,一定会返回,没有执行回函数的。 主要应用场景有:scroll、touchmove 防抖概念(Debounce) 抖动停止后的时间超过设定的时间时执行一次函数。...注意:这里的抖动停止表示你停止了触发这个函数,从这个时间点开始计算,当间隔时间等于你设定时间,才会执行里面的回函数。...如果你一直在触发这个函数并且两次触发间隔小于设定时间,则一定不会到回函数那一步。...throttle 和 debounce lodash使用使用文档 lodash库里面这两个函数设置的参数有点复杂,记录一下里面的参数和代码使用。...func 调用时会传入最后一次提供给 debounced(防抖动)函数 的参数。 后续调用的 debounced(防抖动)函数返回是最后一次 func 调用的结果。

1.8K20

内功修炼之lodash——function系列(面试高频考点)

lodash自己填进去就是一个空格,而且我们还可以console.log(bound(_, "hi"))发现,它具有隐式转换:_ + '' === ''。...实现lodash的bind的时候,除了兼容正常的函数bind之外,还要兼容传入_的时候的空格的case,并merge初始化参数和调用时参数 curry 正向柯里化 _.curry(func, [arity...但是在这里还要考虑到lodash的空格以及柯里化函数多次复用 反向柯里化 原理一样,只是取参数的时候右边往左边取 难度系数: ★★★★★★(如果已经实现里正向柯里化curry,难度降为1星) 建议最长用时...(func, [wait=0] debounce, [options])创建一个防抖动函数。 该函数会在 wait 毫秒后调用 func 方法。...func 会传入最后一次传入的参数给防抖动函数。 随后调用的防抖动函数返回是最后一次 func 调用的结果。 注意: 如果 leading 和 trailing 都设定为 true。

1.2K10

数组原生api以及es6+函数式编程(curry)实现lodash函数

lodash自己填进去就是一个空格,而且我们还可以console.log(bound(_, "hi"))发现,它具有隐式转换:_ + '' === ''。...实现lodash的bind的时候,除了兼容正常的函数bind之外,还要兼容传入_的时候的空格的case,并merge初始化参数和调用时参数 curry 正向柯里化 _.curry(func, [arity...但是在这里还要考虑到lodash的空格以及柯里化函数多次复用 反向柯里化 原理一样,只是取参数的时候右边往左边取 难度系数:★★★★★★(如果已经实现了正向柯里化curry,难度降为1星) 建议最长用时...func 会传入最后一次传入的参数给防抖动函数。随后调用的防抖动函数返回是最后一次 func 调用的结果。 注意: 如果 leading 和 trailing 都设定为 true。...func 在调用时 this 会绑定在缓存函数上。 注意: 缓存会暴露在缓存函数的 cache 上。

78311

浏览器之性能指标-INP

虽然这意味着每次调用setTimeout时循环会让出主线程,但我们应该确保其回不会执行过多的工作。 setInterval在一定时间间隔内运行一个回,因此更有可能妨碍交互。...这是因为与setTimeout单个实例的调用不同,后者是一次性回,可能会干扰用户交互。setInterval的重复性质使得它更有可能干扰交互,从而增加了交互的输入延迟。...布局抖动是性能瓶颈,因为在JavaScript中更新样式,然后立即请求这些样式的值,浏览器被迫执行同步布局工作,而它本来可以在事件回完成后异步地等待稍后执行。...---- 4.3 减少呈现延迟 交互的呈现延迟交互的事件回完成运行的时刻开始,一直延伸到浏览器能够绘制下一个帧,显示出产生的视觉变化。...在使用时,我们应该根据页面的具体情况进行测试和优化,以确保获得预期的性能提升。

77621

前端面试题锦集:第一期

当函数作为对象的方法被调用时,this 指向该对象 作为普通函数调用。 当函数不作为对象的属性被调用时,也就是我们常说的普通函数方式,此时的 this 总是指 向全局对象。 构造器调用。...浅拷贝方法:Object.assign(),Array.prorotype.concat(),Array.prototype.slice() 深拷贝方法:JSON.parse(),lodash....每个消息队列都关联着这个消息的回函数。 在事件循环的某个时刻,运行时会最先进入队列的消息开始处理队列中的消息。被处理的消息会移除队列,并作为输入参数来调用与之关联的函数。...setTimeout, setInterval为什么是异步的?...,其实现方式类似于发布订阅模式,then的时候将回push到缓存数组中,resolve的时候遍历缓存数组执行回函数。

27430

由 Underscore 与 Lodash 的差异引发的思考

然而,当 Underscore 更新到 v1.6.0 时,这个版本添加了一个很棒的功能,其为方法_.partial添加了占位符参数的支持(如果没猜错的话,这个特性应该是 functional.js 中移植过来了...稍微观察一下,我们会发现,传递给_.map方法的匿名回方法仅仅做了件简单的事,将其第一个参数传进Number函数中调用后直接返回。...,窃喜之下后马上将结果改为如下,也没忘夸奖下自己随机应变的能力: //=> [1, NaN, NaN] _.map(['1NO', '2FOOL', '3ME'], parseInt); 等等,我勒个,...除此以外,我想强调的是Number和parseInt是否有共同特征(pattern recognition)值得我们挖掘的呢?答案是有的。...之前我们调用take2的时候传递给它的是单个单个的参数,可是这回调用时传递的却是数组参数。不行,我们需要适配器,我们需要将单个单个参数转化为数组参数的适配器——我们需要unsplat适配器!

7.8K90

前端js手写题经常忘,记录一下

即触发事件间隔大于等于指定的时间才会执行回函数。...图片像dom的拖拽,如果用消抖的话,就会出现卡顿的感觉,因为只在停止的时候执行了一次,这个时候就应该用节流,在一定时间内多次执行,会流畅很多手写简版使用时间戳的节流函数会在第一次触发事件时立即执行,以后每过...:我知道多少种重方式1....实现思路是使用递归函数,不断地执行 setTimeout 从而达到 setInterval 的效果function mySetInterval(fn, timeout) { // 控制器,控制定时器是否继续执行...delay); };};适用场景:按钮提交场景:防止多次提交按钮,只执行最后提交的一次服务端验证场景:表单验证需要服务端配合,只执行一段连续的输入事件的最后一次,还有搜索联想词功能类似生存环境请用lodash.debounce

92440

彻底解决 qiankun 找不到入口的问题

如果在 合适的时机 以 某种执行方式 执行微应用的 JS 代码,大概就能实现 主-微 结构的微前端开发了。 这里有两个关键词:合适的时机 和 执行方式。...这就是为什么微应用的入口文件 main.js 依然需要提供 single-spa 的生命周期回。 如何找入口 现在我们来聊聊如何找入口的问题。...你总不能说:手写一个 JS 脚本,然后每次打包后用正则 replace HTML,以此来添加 entry 属性吧??? 当然不行!...总结 最后总结一下,qiankun 要找入口是因为要从中拿到生命周期回,把它们给 single-spa 做调度。...,主应用会试着 window[library] 找微应用的生命周期回,找到后依然能正常加载 在主应用注册微应用时,要把微应用的 name 和 Webpack 的 output.library 设为一致

1.9K10

滴滴前端二面必会面试题

,当使用 new 进行函数调用时会报错。...每当进入某一个阶段的时候,都会对应的回队列中取出函数去执行。当队列为空或者执行的回函数数量到达系统设定的阈值,就会进入下一阶段。...此阶段会判断是否存在过期的计时器回(包含 setTimeout 和 setInterval),如果存在则会执行所有过期的计时器回,执行完毕后,如果回中触发了相应的微任务,会接着执行所有微任务,执行完微任务后再进入...当回队列为空时(没有回或所有回执行完毕):但如果存在有计时器(setTimeout、setInterval和setImmediate)没有执行,会结束轮询阶段,进入 Check 阶段。...因为两个代码写在 IO 回中,IO 回是在 poll 阶段执行,当回执行完毕后队列为空,发现存在 setImmediate 回,所以就直接跳转到 check 阶段执行回调了。

39430

Node中的事件循环和异步API

当主线程发起I/O调用时,I/O操作会被放在I/O线程来执行,主线程继续执行下面的任务,在I/O线程完成操作后会带着数据通知主线程发起回。...1.3 请求对象 对于Node中的异步I/O调用而言,回函数不由开发者来调用,JS发起调用到I/O操作完成,存在一个中间产物,叫请求对象。...在进行系统调用时JS层传入的方法和参数都被封装在一个请求对象中,请求对象被放在线程池中等待执行。JS立即返回继续后续操作。...1.4 执行回 在线程可用时,线程会取出请求对象来执行I/O操作,执行完后将结果放在请求对象中,并归还线程。...注意这里没有检测timers队列中是否有成员到达超时事件,因为setImmediate()优先)。

1.6K30

Lodash那些“多余”和让人眼前一亮的 API

arr2.length = 2 // 修改长度,直接删除后面元素,可用于清空数组 // [1, 2] 眼前一亮的API pullAt (根据下标选择元素,分到两个数组) takeRight ( 返回结尾元素开始...[{ 'c': 1 }, { 'd': 2 }] } } xor( 创建一个给定数组唯一值的数组 ) 眼前二亮的API remove(元素筛选,分到两个数组) sortedUniq (重,排序)...takeRightWhile ( array数组的最后一个元素开始提取元素,直到 predicate 返回假值 ) uniqBy (重,排序) 四、集合 Collection Collection很多...回参数为对应集合item;value为item) orderBy | sortBy(排序:可指定多个排序字段,有优先级;可控制升序和反序) partition (站队:根据回返回值,返回 [ 返回值为...的String API多为转换不同值的API,如:首字母大写、驼峰式、html属性式、下划线连接式、全小写、首字母小写、编码、填充,空格等API。

3.4K10

Solid.js 就是我理想中的 React

依赖数组中省略变量是 React hooks 的一个常见错误,如果你忘记了,有一些 linting 规则会警告你的。 我稍后会回到这个问题上。...可以通过几种方式来解决这个问题: 清除间隔的 useEffect hook 返回一个清理函数 使用 setTimeout 代替 setInterval(还是要使用清理函数) 使用 setCount 的函数形式来避免直接引用当前值...由于我们为计数设置器使用了回函数,因此永远不会在 count 变量上有陈旧闭包。 这是一个人为做出来的例子,但除非你已经使用 React 一段时间,否则它仍然很令人困惑。...如果 linter 知道一个效果(或回或 memo)hook 何时缺少依赖项,那么为什么框架不能自动检测依赖项并对这些更改做出响应呢?..., 1000); console.log(`The count is ${count()}`); return The count is: {count()}; } 但这不起作用

1.8K50
领券