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

在clearInterval()之后,setInterval()无法工作

在调用clearInterval()函数之后,setInterval()函数将无法正常工作。clearInterval()函数用于取消之前通过setInterval()函数创建的定时器。当调用clearInterval()函数时,它会停止定时器的执行,并清除定时器的计时器标识。

setInterval()函数用于按照指定的时间间隔重复执行指定的代码或函数。它会返回一个唯一的计时器标识,可以通过该标识来取消定时器的执行。

当我们调用clearInterval()函数取消定时器后,之前创建的定时器就被清除了,计时器标识也失效了。因此,如果在clearInterval()之后再次调用setInterval()函数,将无法创建新的定时器,定时器的代码也不会被执行。

解决这个问题的方法是,在调用clearInterval()函数之前,先将setInterval()函数的返回值保存在一个变量中。然后,在需要重新启动定时器时,使用这个变量作为参数调用setInterval()函数即可。

以下是一个示例代码:

代码语言:txt
复制
// 创建定时器并保存计时器标识
var timer = setInterval(function() {
  // 定时器的代码
  console.log("定时器执行中...");
}, 1000);

// 取消定时器
clearInterval(timer);

// 重新启动定时器
timer = setInterval(function() {
  // 定时器的代码
  console.log("定时器重新启动...");
}, 1000);

在这个示例中,我们首先使用setInterval()函数创建了一个定时器,并将计时器标识保存在变量timer中。然后,我们调用clearInterval(timer)取消定时器的执行。最后,我们再次调用setInterval()函数重新启动定时器,并将新的计时器标识保存在timer变量中。

这样,我们就可以在clearInterval()之后正常使用setInterval()函数了。

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

相关·内容

vueIE下无法正常工作,Promise未定义?

用vue写了一个日历组件,Firefox、Edge、Chrome以及360等浏览器极速模式中运行一切正常,如图: 但在IE和360等浏览器的兼容模式下却显示了模板,看起来像乱码一样,如图: 按F12...左思右想,突然灵光一闪,ES5的函数声明中并不能为形参赋默认值,这种写法是ES6新增的,而IE是不兼容ES6的,那就把代码改一改,这里不再赋默认值,为了让方法可以正确执行而不报错,调用这个方法的地方都强制传参就好了...`es6-promise`项目[github地址](https://github.com/stefanpenner/es6-promise) 现在,这个组件终于可以IE上正常展示了!...最后,我们的项目是否需要兼容ES5需要您对您的用户有一个较为明确的认知,并不是所有项目都需要去做ES5兼容,毕竟因此会增加不少的工作量。...VUE: 1 / 1 vueIE下无法正常工作,Promise未定义?

4.1K20

安装Apache之后浏览器中无法访问问题

前面说到服务器上安装Web服务器Apache:https://www.jianshu.com/p/81eb2e086267,今天继续启动,继续学习,操作如下,此时此刻办公室就剩下我一个人了,好孤独~...1:登陆服务器的时候 启动一下apache,执行下面的命令启动apache apachectl start 一般安装完Apache环境之后,正常的话直接输入ip就可以看到apache的测试页面,差不多是这样的...但是,浏览器输入我们的的ip或者域名的时候是这样的,没有办法访问 ?...在网上看到了一个解决办法: 1:修改系统防火墙配置文件,第五行配置中增加允许80端口监听外来ip iptables -I INPUT 5 -i eth0 -p tcp --dport 80 -j ACCEPT...如果依旧无法访问,可能是阿里云服务器没有配置安全组 可以参考解决方案: https://help.aliyun.com/document_detail/25471.html?

4.1K20

通过 React Hooks 声明式地使用 setInterval

这是通过组件生命周期上绑定 setIntervalclearInterval 的组合完成的。 这是一份可以项目中随意复制粘贴的实现,你甚至可以发布到 NPM 上。...可是为什么 Hooks 里使用 setIntervalclearInterval 这么让人恼火? 回到刚开始的计时器例子,我们尝试手动去实现它。...() 清理掉,之后 setInterval() // 重新设置的计时器,会重新开始计时 ReactDOM.render(, rootElement); }, 100); (...此非万全之策,新的 props 就无法读取到。 另一个解决方案是使用 useReducer()。此方案更为灵活。 reducer 内部,可以访问当前的状态,以及最新的 props。...相对应的,setInterval 却没有描述到整个过程 - 一旦你设置了计时器,它就无法改变了,只能清除它。 这就是 React 模型和 setInterval API 之间的“阻抗不匹配”。

7.5K220

js运动框架逐渐递进版

运动,其实就是一段时间内改变left、right、width、height、opactiy的值,到达目的地之后停止。 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动。 缓冲运动。...定时器的使用(动态改变值),这里使用setInterval()每隔指定的时间执行代码。 计时器setInterval(函数,交互时间(毫秒)):执行时,从载入页面后每隔指定的时间执行代码。...运动中的Bug 速度取到某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 速度无法更改 解决BUG 速度取到某些值会无法停止(这个Bug稍后解决,进化过程中自然解决) 把运动和停止隔开(if...{     clearInterval(timer);//开始运动时,关闭已有定时器     timer = setInterval(function () {         var iSpeed...,即减一之后

1.9K40

你可能不知道的 React Hooks

即使组件卸载之后,仍将调用 setCount。 Hooks API Reference[6]: useEffect[7], Conditionally firing an effect[8]....在这个例子中,useEffect mount 之后会被调用一次,并且每次 count 都会改变。 清理函数将在每次 count 更改时被调用以释放前面的资源。...这段代码工作正常,没有任何错误,但是还是有点不好,每 500 毫秒创建和释放 setInterval, 每个 setInterval 总是调用一次。...这段代码工作正常,效率更高。 组件的生命周期中,我们使用单个 setIntervalclearInterval 只会在卸载组件之后调用一次。...如果 start 函数 和 stop 函数被传递给一个 memoized 组件,整个优化就会失败,因为每次渲染之后都会返回新的引用。

4.7K20

setInterval 和 hooks 撞在一起,翻车了~

接下来我们手动实现一个计时器例子来说明下,hooks 里使用 setIntervalclearInterval 失效的根本原因。...而调用了 clearInterval 后重新 setInterval 的时候,计时会被重置。如果频繁重新渲染,导致 useEffect 频繁执行,计时器可能压根就不会被触发!定时器也就失效了。...{count}; } 但实际上呢,计时器更新到 1 之后,就停止不动了。...计时器还是失败了,无法实现轮询功能。 为何现象与预期不符呢?其实仔细观察,你会发现,这是个闭包的坑! useEffect 使用的 count 是第一次渲染的时候获取的。 获取的时候,它就是 0。...(tick, delay); return () => clearInterval(id); }, [delay]); } 好啦,现在我们不需要再关注这一堆罗里吧嗦的逻辑了, hooks

1.3K20

定时器

setTimeout() setTimeout函数用来指定某个函数或某段代码,多少毫秒之后执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。...clearTimeout(),clearInterval() setTimeout和setInterval函数,都返回一个表示计数器编号的整数值,将该整数传入clearTimeout和clearInterval...var id1 = setTimeout(f,1000); var id2 = setInterval(f,1000); clearTimeout(id1); clearInterval(id2);...但是,如果后面的veryLongTask函数(同步任务)运行时间非常长,过了100毫秒还无法结束,那么被推迟运行的someTask就只有等着,等到veryLongTask运行结束,才轮到它执行。...但是,紧接着的语句需要3000毫秒才能完成,那么setInterval就必须推迟到3000毫秒之后才开始生效。这3000毫秒之内,setInterval不会产生累积效应。

1.4K60

Note·React Hook 定时器

== this.state.delay) { clearInterval(this.timer) this.timer = setInterval(this.tick, this.state.delay...setCount(c => c + 1),传入的参数是一个函数 c => c + 1,也就是接收之前的值然后每次增一,而不是 setCount(count + 1),可以明确的是如果传入 count + 1 是无法正常工作的...虽然通过传入函数而不是固定值可以解决 count 被固定的问题,但是却无法读取每次渲染时期的 props。如何解决呢?可以通过每次计数的时候不改变定时器,但是动态指向定时器的回调。...useRef() 返回了一个字面量,持有一个可变的 current 属性,每一次渲染之间共享。...会更加优雅,而且 useInterval 与 setInterval 使用方式一样: setInterval(fn, delay) useInterval(fn, delay)

48730

解释 JavaScript 中计时器的工作原理

当 setTimeOut() 函数执行时,它会启动计时器,特定延迟之后,它会执行回调函数。 语法 用户可以按照以下语法使用 setTimeOut() 函数。...参数 回调 – 这是一个延迟时间后执行的函数。 延迟 – 延迟是在此时间之后执行回调函数的时间(以毫秒为单位)。 返回值 setTimeOut() 函数返回唯一 id,我们可以用它来杀死计时器。...,但 setInterval() 函数我们作为 setInterval() 的第二个参数传递的每个间隔后执行代码。...clearInterval(TimerId); 参数 TimerId – 它是由 setTimeOut() 或 setInterval() 函数返回的唯一 id。...回调函数中,我们使用 if 语句检查计数是否大于 3,并使用 clearInterval() 函数杀死计时器。

1.5K20

5个常见的JavaScript内存错误

它返回一个时间间隔ID,该ID唯一地标识时间间隔,因此您可以稍后通过调用 clearInterval() 来删除它。 我们创建一个组件,它调用一个回调函数来表示它在x个循环之后完成了。...setInterval 的返回值是一个间隔 ID,我们可以用它来取消这个间隔。在这种特殊情况下,我们可以组件卸载后调用 clearInterval。...); }, [refreshCycle, setInterval, clearInterval]); }; export default useTimeout; 现在需要使用setInterval...否则,垃圾回收器将无法清理它们,因为它们仍然是可访问的。...我们执行几次之后监视函数: 在上面的截图中看到节点是如何被泄露的。那怎么解决这个问题?清除 elements 数组将使它们有资格进行垃圾收集。

1.4K20

JavaScript定时调用函数(SetInterval与setTimeout)

setTimeout和setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。...不过这两个函数还是有区别的,setInterval执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码。...如果要求每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout...setInterval 不断地执行指定代码直到调用clearInterval清除定时器对象 setTimeout 执行一次指定代码,使用clearTimeout清除定时器对象 setInterval和setTimeout...都返回定时器对象标识符,用于clearInterval和clearTimeout调用

1.4K40

JavaScript设置定时器、取消定时器及执行机制解析

下面来介绍几个常用的 JavaScript 定时器: setTimeout() 设置一个定时器,定时器到期后执行一次函数或代码段:setTimeout(fn, x) 表示延迟 x 毫秒之后执行 fn...对于 setInterval(fn, 100) 容易产生一个误区:并不是上一次 fn 执行完了之后再过 100ms 才开始执行下一次 fn。...clearTimeout() 取消定时器 clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。...clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。...而通过setTimeout模拟的setIntervalsetInterval的区别则在于:setTimeout只有回调完成之后才会去调用下一次定时器,而setInterval则不管回调函数的执行情况

4.7K10

jquery清除定时任务

使用setInterval设置定时任务jQuery中,通常使用setInterval函数来设置定时任务,该函数按照指定的时间间隔周期性地执行指定的函数。...定时任务正在执行...');}, 1000);// 某个条件下清除定时任务if (condition) { clearInterval(intervalId); console.log('...JavaScript中的setInterval函数JavaScript中,setInterval函数是一种用于周期性地重复执行指定函数或代码块的方法。...它的工作原理是每个指定的时间间隔后重复执行指定的函数,直到被取消或页面被关闭。下面将详细介绍setInterval函数的用法和一些注意事项。...取消定时任务:可以使用clearInterval函数来取消通过setInterval设置的定时任务,需要传入setInterval返回的任务ID。

10610

Web前端学习 第3章 JavaScript基础教程17 计时器方

一、计时器方法概述 计时器方法可以实现在指定的时间过后,单次或重复调用函数的功能,setTimeout可以实现函数指定毫秒数后单次执行,setInterval可以实现函数指定毫秒数后重复执行,语法如下所示...,不会输出hello world,如果不点击按钮,3秒钟之后就会输出hello world 1 var btn = document.querySelector("button"); 2 var t...下面我们来实现一个效果,每3秒钟控制台输出依次hello world 1 setInterval(function(){ 2 console.log("hello world"); 3 },3000...) 从代码可以看出,setInterval与setTimeout完全相同,区别在于setInterval参数中的函数没个指定毫秒数后都会重复执行,当我们不希望计时器重复执行的时候,就可以使用clearInterval...在上面代码的结尾,我们页面加载之后调用了一次showNumber,目的是为了让页面加载的时候就输出1,否则我们将要等待一秒之后才能看到控制台输出1。

1.5K20
领券