javascript的interval如何真正清除

老王就是我 2018-03-15 05:40:00
别和我说clearInterval了，clearInterval只是停止计时器而已，我想要的是真正清除该计时器，然后某个事件再重启该计时器interval
...全文
970 29 打赏 收藏 转发到动态 举报
写回复
用AI写文章
29 条回复
切换为时间正序
请发表友善的回复…
发表回复
老王就是我 2018-03-21
  • 打赏
  • 举报
 回复
引用 27 楼 jslang 的回复:
[quote=引用 26 楼 qq_22899047 的回复:] [quote=引用 25 楼 jslang 的回复:] [quote=引用 24 楼 qq_22899047 的回复:] [quote=引用 23 楼 jslang 的回复:] [quote=引用 21 楼 qq_22899047 的回复:] [quote=引用 18 楼 qq_34571940 的回复:] [quote=引用 6 楼 qq_22899047 的回复:] [quote=引用 5 楼 qq_34571940 的回复:] [quote=引用 2 楼 qq_22899047 的回复:] [quote=引用 1 楼 qq_34571940 的回复:] 停止计时器，然后置空啊
都说了，不行啊！NULL都不行，还怎么制空？[/quote] 不科学啊，理论上不会啊[/quote] 就是这样，不知道为啥，再重新启动的话就会两个计时器叠加[/quote] 我大概试了一下，一个定时器是可以取消的，取消不掉原因可能就在定时器的叠加上面，因为你操作的是一个数据，所以一叠加会出问题[/quote] 所以并没有真正清除而只是停止而已啊！比如同一个计时器，停止后又运行了，则会出现我说的问题——一个计时器每秒+1变成每秒+2[/quote] 你这不是计时器setInterval的问题，应该是对同一事件重复绑定的问题。 你的代码应该是在事件触发之后，又对这个事件重复绑定了一次事件函数，这样在下次触发事件时，事件函数会连着执行两次，同时创建两个计时器。 [/quote] 我是CLEAR后才再次绑定事件，而不是运行事件过程中再次绑定[/quote] 什么时候再次绑定事件都不行。 只要是绑定了两次事件，在下次触发事件时，事件函数就会连着执行两次。 主要是事件函数连着执行两次的问题，而同时创建两个计时器只是附带结果。 总之不要重复绑定事件。事件应该只在初始化时绑定一次。或者在再次绑定事件前先解除上一次的绑定。 [/quote] 如何解除上次绑定？[/quote] 原生 addEventListener()绑定的事件用 removeEventListener()移除 jquery绑定的事件用 off()移除 [/quote] 好，我试试
老王就是我 2018-03-21
  • 打赏
  • 举报
 回复
引用 18 楼 qq_34571940 的回复:
[quote=引用 6 楼 qq_22899047 的回复:] [quote=引用 5 楼 qq_34571940 的回复:] [quote=引用 2 楼 qq_22899047 的回复:] [quote=引用 1 楼 qq_34571940 的回复:] 停止计时器，然后置空啊
都说了，不行啊！NULL都不行，还怎么制空？[/quote] 不科学啊，理论上不会啊[/quote] 就是这样，不知道为啥，再重新启动的话就会两个计时器叠加[/quote] 我大概试了一下，一个定时器是可以取消的，取消不掉原因可能就在定时器的叠加上面，因为你操作的是一个数据，所以一叠加会出问题[/quote] 所以并没有真正清除而只是停止而已啊！比如同一个计时器，停止后又运行了，则会出现我说的问题——一个计时器每秒+1变成每秒+2
老王就是我 2018-03-21
  • 打赏
  • 举报
 回复
引用 19 楼 jslang 的回复:
[quote=引用 17 楼 qq_22899047 的回复:] [quote=引用 14 楼 jslang 的回复:] 看看这个例子 

<input type="button" value="运行" onclick="func();" />
<div id="text"></div>
<script type="text/javascript">
var timer,i;
function func() {
	i = 0;
	clearInterval(timer);
	timer = setInterval(function(){
		document.getElementById("text").innerHTML = ++i;
		if (i>=5)
			clearInterval(timer);
	}, 1000);
}
</script>
但如果我下面再执行一次事件呢？[/quote] 如果你是让多个计时器同时运行，就要保存住每一个正在运行的setInterval()所返回的id数值。这样才能用 clearInterval()通过对应的id来清除对应的计时器。 

<input type="button" value="运行1" onclick="func('text1');" />
<div id="text1"></div>
<input type="button" value="运行2" onclick="func('text2');" />
<div id="text2"></div>
<script type="text/javascript">
function func(id) {
	var obj = document.getElementById(id);
	obj.innerHTML = 0;
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		obj.innerHTML++;
		if (obj.innerHTML>=5)
			clearInterval(obj.timer);
	}, 1000);
}
</script>
[/quote] 虽然没有解决我的问题，不过谢谢了
天际的海浪 2018-03-21
  • 打赏
  • 举报
 回复
引用 26 楼 qq_22899047 的回复:
[quote=引用 25 楼 jslang 的回复:] [quote=引用 24 楼 qq_22899047 的回复:] [quote=引用 23 楼 jslang 的回复:] [quote=引用 21 楼 qq_22899047 的回复:] [quote=引用 18 楼 qq_34571940 的回复:] [quote=引用 6 楼 qq_22899047 的回复:] [quote=引用 5 楼 qq_34571940 的回复:] [quote=引用 2 楼 qq_22899047 的回复:] [quote=引用 1 楼 qq_34571940 的回复:] 停止计时器，然后置空啊
都说了，不行啊！NULL都不行，还怎么制空？[/quote] 不科学啊，理论上不会啊[/quote] 就是这样，不知道为啥，再重新启动的话就会两个计时器叠加[/quote] 我大概试了一下，一个定时器是可以取消的，取消不掉原因可能就在定时器的叠加上面，因为你操作的是一个数据，所以一叠加会出问题[/quote] 所以并没有真正清除而只是停止而已啊！比如同一个计时器，停止后又运行了，则会出现我说的问题——一个计时器每秒+1变成每秒+2[/quote] 你这不是计时器setInterval的问题，应该是对同一事件重复绑定的问题。 你的代码应该是在事件触发之后，又对这个事件重复绑定了一次事件函数，这样在下次触发事件时，事件函数会连着执行两次，同时创建两个计时器。 [/quote] 我是CLEAR后才再次绑定事件，而不是运行事件过程中再次绑定[/quote] 什么时候再次绑定事件都不行。 只要是绑定了两次事件，在下次触发事件时，事件函数就会连着执行两次。 主要是事件函数连着执行两次的问题，而同时创建两个计时器只是附带结果。 总之不要重复绑定事件。事件应该只在初始化时绑定一次。或者在再次绑定事件前先解除上一次的绑定。 [/quote] 如何解除上次绑定？[/quote] 原生 addEventListener()绑定的事件用 removeEventListener()移除 jquery绑定的事件用 off()移除
老王就是我 2018-03-21
  • 打赏
  • 举报
 回复
引用 25 楼 jslang 的回复:
[quote=引用 24 楼 qq_22899047 的回复:] [quote=引用 23 楼 jslang 的回复:] [quote=引用 21 楼 qq_22899047 的回复:] [quote=引用 18 楼 qq_34571940 的回复:] [quote=引用 6 楼 qq_22899047 的回复:] [quote=引用 5 楼 qq_34571940 的回复:] [quote=引用 2 楼 qq_22899047 的回复:] [quote=引用 1 楼 qq_34571940 的回复:] 停止计时器，然后置空啊
都说了，不行啊！NULL都不行，还怎么制空？[/quote] 不科学啊，理论上不会啊[/quote] 就是这样，不知道为啥，再重新启动的话就会两个计时器叠加[/quote] 我大概试了一下，一个定时器是可以取消的，取消不掉原因可能就在定时器的叠加上面，因为你操作的是一个数据，所以一叠加会出问题[/quote] 所以并没有真正清除而只是停止而已啊！比如同一个计时器，停止后又运行了，则会出现我说的问题——一个计时器每秒+1变成每秒+2[/quote] 你这不是计时器setInterval的问题，应该是对同一事件重复绑定的问题。 你的代码应该是在事件触发之后，又对这个事件重复绑定了一次事件函数，这样在下次触发事件时，事件函数会连着执行两次，同时创建两个计时器。 [/quote] 我是CLEAR后才再次绑定事件，而不是运行事件过程中再次绑定[/quote] 什么时候再次绑定事件都不行。 只要是绑定了两次事件，在下次触发事件时，事件函数就会连着执行两次。 主要是事件函数连着执行两次的问题，而同时创建两个计时器只是附带结果。 总之不要重复绑定事件。事件应该只在初始化时绑定一次。或者在再次绑定事件前先解除上一次的绑定。 [/quote] 如何解除上次绑定？
天际的海浪 2018-03-21
  • 打赏
  • 举报
 回复
引用 24 楼 qq_22899047 的回复:
[quote=引用 23 楼 jslang 的回复:] [quote=引用 21 楼 qq_22899047 的回复:] [quote=引用 18 楼 qq_34571940 的回复:] [quote=引用 6 楼 qq_22899047 的回复:] [quote=引用 5 楼 qq_34571940 的回复:] [quote=引用 2 楼 qq_22899047 的回复:] [quote=引用 1 楼 qq_34571940 的回复:] 停止计时器，然后置空啊
都说了，不行啊！NULL都不行，还怎么制空？[/quote] 不科学啊，理论上不会啊[/quote] 就是这样，不知道为啥，再重新启动的话就会两个计时器叠加[/quote] 我大概试了一下，一个定时器是可以取消的，取消不掉原因可能就在定时器的叠加上面，因为你操作的是一个数据，所以一叠加会出问题[/quote] 所以并没有真正清除而只是停止而已啊！比如同一个计时器，停止后又运行了，则会出现我说的问题——一个计时器每秒+1变成每秒+2[/quote] 你这不是计时器setInterval的问题，应该是对同一事件重复绑定的问题。 你的代码应该是在事件触发之后，又对这个事件重复绑定了一次事件函数，这样在下次触发事件时，事件函数会连着执行两次，同时创建两个计时器。 [/quote] 我是CLEAR后才再次绑定事件，而不是运行事件过程中再次绑定[/quote] 什么时候再次绑定事件都不行。 只要是绑定了两次事件，在下次触发事件时，事件函数就会连着执行两次。 主要是事件函数连着执行两次的问题，而同时创建两个计时器只是附带结果。 总之不要重复绑定事件。事件应该只在初始化时绑定一次。或者在再次绑定事件前先解除上一次的绑定。
老王就是我 2018-03-21
  • 打赏
  • 举报
 回复
引用 23 楼 jslang 的回复:
[quote=引用 21 楼 qq_22899047 的回复:] [quote=引用 18 楼 qq_34571940 的回复:] [quote=引用 6 楼 qq_22899047 的回复:] [quote=引用 5 楼 qq_34571940 的回复:] [quote=引用 2 楼 qq_22899047 的回复:] [quote=引用 1 楼 qq_34571940 的回复:] 停止计时器，然后置空啊
都说了，不行啊！NULL都不行，还怎么制空？[/quote] 不科学啊，理论上不会啊[/quote] 就是这样，不知道为啥，再重新启动的话就会两个计时器叠加[/quote] 我大概试了一下，一个定时器是可以取消的，取消不掉原因可能就在定时器的叠加上面，因为你操作的是一个数据，所以一叠加会出问题[/quote] 所以并没有真正清除而只是停止而已啊！比如同一个计时器，停止后又运行了，则会出现我说的问题——一个计时器每秒+1变成每秒+2[/quote] 你这不是计时器setInterval的问题，应该是对同一事件重复绑定的问题。 你的代码应该是在事件触发之后，又对这个事件重复绑定了一次事件函数，这样在下次触发事件时，事件函数会连着执行两次，同时创建两个计时器。 [/quote] 我是CLEAR后才再次绑定事件，而不是运行事件过程中再次绑定
天际的海浪 2018-03-21
  • 打赏
  • 举报
 回复
引用 21 楼 qq_22899047 的回复:
[quote=引用 18 楼 qq_34571940 的回复:] [quote=引用 6 楼 qq_22899047 的回复:] [quote=引用 5 楼 qq_34571940 的回复:] [quote=引用 2 楼 qq_22899047 的回复:] [quote=引用 1 楼 qq_34571940 的回复:] 停止计时器，然后置空啊
都说了，不行啊！NULL都不行，还怎么制空？[/quote] 不科学啊，理论上不会啊[/quote] 就是这样，不知道为啥，再重新启动的话就会两个计时器叠加[/quote] 我大概试了一下，一个定时器是可以取消的，取消不掉原因可能就在定时器的叠加上面，因为你操作的是一个数据，所以一叠加会出问题[/quote] 所以并没有真正清除而只是停止而已啊！比如同一个计时器，停止后又运行了，则会出现我说的问题——一个计时器每秒+1变成每秒+2[/quote] 你这不是计时器setInterval的问题，应该是对同一事件重复绑定的问题。 你的代码应该是在事件触发之后，又对这个事件重复绑定了一次事件函数，这样在下次触发事件时，事件函数会连着执行两次，同时创建两个计时器。
咸哼酒家 2018-03-21
  • 打赏
  • 举报
 回复
天际的海浪 2018-03-20
  • 打赏
  • 举报
 回复
引用 17 楼 qq_22899047 的回复:
[quote=引用 14 楼 jslang 的回复:] 看看这个例子 

<input type="button" value="运行" onclick="func();" />
<div id="text"></div>
<script type="text/javascript">
var timer,i;
function func() {
	i = 0;
	clearInterval(timer);
	timer = setInterval(function(){
		document.getElementById("text").innerHTML = ++i;
		if (i>=5)
			clearInterval(timer);
	}, 1000);
}
</script>
但如果我下面再执行一次事件呢？[/quote] 如果你是让多个计时器同时运行，就要保存住每一个正在运行的setInterval()所返回的id数值。这样才能用 clearInterval()通过对应的id来清除对应的计时器。 

<input type="button" value="运行1" onclick="func('text1');" />
<div id="text1"></div>
<input type="button" value="运行2" onclick="func('text2');" />
<div id="text2"></div>
<script type="text/javascript">
function func(id) {
	var obj = document.getElementById(id);
	obj.innerHTML = 0;
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		obj.innerHTML++;
		if (obj.innerHTML>=5)
			clearInterval(obj.timer);
	}, 1000);
}
</script>
赫连伯伯 2018-03-20
  • 打赏
  • 举报
 回复
引用 6 楼 qq_22899047 的回复:
[quote=引用 5 楼 qq_34571940 的回复:] [quote=引用 2 楼 qq_22899047 的回复:] [quote=引用 1 楼 qq_34571940 的回复:] 停止计时器，然后置空啊
都说了，不行啊！NULL都不行，还怎么制空？[/quote] 不科学啊，理论上不会啊[/quote] 就是这样，不知道为啥，再重新启动的话就会两个计时器叠加[/quote] 我大概试了一下，一个定时器是可以取消的，取消不掉原因可能就在定时器的叠加上面，因为你操作的是一个数据，所以一叠加会出问题
老王就是我 2018-03-20
  • 打赏
  • 举报
 回复
引用 14 楼 jslang 的回复:
看看这个例子 

<input type="button" value="运行" onclick="func();" />
<div id="text"></div>
<script type="text/javascript">
var timer,i;
function func() {
	i = 0;
	clearInterval(timer);
	timer = setInterval(function(){
		document.getElementById("text").innerHTML = ++i;
		if (i>=5)
			clearInterval(timer);
	}, 1000);
}
</script>
但如果我下面再执行一次事件呢？
老王就是我 2018-03-20
  • 打赏
  • 举报
 回复
引用 15 楼 buchifan114 的回复:
应该是楼主第二次又绑定了一次事件，这样就造成2个计时器
对啊，就是这样啊，所以，clear并没有真正清除该计时器，只是停止而已
100001夜 2018-03-20
  • 打赏
  • 举报
 回复
应该是楼主第二次又绑定了一次事件，这样就造成2个计时器
天际的海浪 2018-03-19
  • 打赏
  • 举报
 回复
看看这个例子 

<input type="button" value="运行" onclick="func();" />
<div id="text"></div>
<script type="text/javascript">
var timer,i;
function func() {
	i = 0;
	clearInterval(timer);
	timer = setInterval(function(){
		document.getElementById("text").innerHTML = ++i;
		if (i>=5)
			clearInterval(timer);
	}, 1000);
}
</script>
似梦飞花 2018-03-19
  • 打赏
  • 举报
 回复
引用 6 楼 qq_22899047 的回复:
[quote=引用 5 楼 qq_34571940 的回复:] [quote=引用 2 楼 qq_22899047 的回复:] [quote=引用 1 楼 qq_34571940 的回复:] 停止计时器，然后置空啊
都说了，不行啊！NULL都不行，还怎么制空？[/quote] 不科学啊，理论上不会啊[/quote] 就是这样，不知道为啥，再重新启动的话就会两个计时器叠加[/quote] 

<input type="button" value="run" onclick="add()"/>
<input type="button" value="stop" onclick="stop()"/>
<div></div>
<script>
    var i=0,t=null;
    var div=document.querySelector('div');
    function add() {
        t=setInterval(function(){
            div.innerHTML=++i;
        },1e3)
    }
    function stop(){
        if(t){
            clearInterval(t);
            t=null;
        }
    }
</script>
应该是你其他地方的问题
老王就是我 2018-03-19
  • 打赏
  • 举报
 回复
引用 5 楼 qq_34571940 的回复:
[quote=引用 2 楼 qq_22899047 的回复:] [quote=引用 1 楼 qq_34571940 的回复:] 停止计时器，然后置空啊
都说了，不行啊！NULL都不行，还怎么制空？[/quote] 不科学啊，理论上不会啊[/quote] 就是这样，不知道为啥，再重新启动的话就会两个计时器叠加
老王就是我 2018-03-19
  • 打赏
  • 举报
 回复
引用 11 楼 showbo 的回复:
代码发全来，你这样说还不是一样不明不白。最好的办法就是setInterval钱clearInterval clearInterval(time) time=setInterval(function a(){sdfdsf},1000);
不，我这个是写在下面的，TIME里面某个时间段，time>=20{clear}或者function(){clear}。
老王就是我 2018-03-19
  • 打赏
  • 举报
 回复
引用 11 楼 showbo 的回复:
代码发全来，你这样说还不是一样不明不白。最好的办法就是setInterval钱clearInterval clearInterval(time) time=setInterval(function a(){sdfdsf},1000);
而且我那个逻辑也不复杂大概逻辑就是： time=setInterval(function(){ i++;if(i>2)clear(time) },1000); function(){clear(time)}； 大概就这样，代码没了纯手打懒得写上全部关键字了
Go 旅城通票 2018-03-19
  • 打赏
  • 举报
 回复
代码发全来，你这样说还不是一样不明不白。最好的办法就是setInterval钱clearInterval
clearInterval(time)
time=setInterval(function a(){sdfdsf},1000);
加载更多回复（8）
angularjs定时任务的设置与清除示例
人们似乎常常将AngularJS中的$timeOut()  $interval()函数看做是一个内置的、无须在意的函数。但是，如果你忘记了$timeOut()$interval()的回调函数将会造成非常不好的影响，你可能会因此遇到代码莫名其妙的出现问题，或者无端抛出一个错误甚至是一遍一遍的重复对的你的服务器进行$http请求这些诡异的情形。管理好你的$timeOut/$interval定时器的小技巧就是在$destory事件中将它们取消。 和JavaScript中原生的setTimeout()以及setInterval()函数不同，AngularJS中的$timeOut()函数会返回一个pro
hooks:最喜欢的自定义钩子
我最喜欢的React钩子 安装 yarn add @juanaraneta/hooks useInterval（回调，间隔） import { useInterval } from '@juanaraneta/hooks' 如果要将此挂钩用于滑块，并且用户需要更改顺序，则需要添加几行代码以清除该间隔，然后将其从默认值重新设置。为此，您需要将delay设置为null，并添加一个useEffect挂钩以重新启动它。 const defaultDelay = 5000 // 5 seconds interval const useEffect ( ( ) => { } ! delay && setDelay ( defaultDelay ) , [ delay ] ) const [ interval , setInterval ] = useState ( defaultDelay
active-cache:围绕异步缓存和lru缓存的包装器，可主动删除项目
主动缓存 这是和的包装，可在指定的时间间隔提供活动的缓存清除。 如果您可能有很多缓存，每个缓存可能都有非常大的项目（特别是缓冲区），这很有用。 不应将其用于包含许多项的缓存（它在键上循环）。 $ npm install active-cache --save 样品用量 var ActiveAsyncCache = require ( 'active-cache/async' ) ; var ActiveSyncCache = require ( 'active-cache/sync' ) ; var cache = new ActiveSyncCache ( { interval : 5000 , max : 100 , maxAge : 1000 * 60 * 60 } ) ; var cache = new ActiveAsyncCache ( { interval : 5000
timebot:Tiny JS实用程序，用于排队和清除超时和间隔
时间机器人 Tiny JS实用程序，用于管理多个超时和间隔。 Timebot提供了一种集中且组织化的方式来管理定时异步功能。 而且，由于它将仅在系统上运行一个间隔，因此它比运行单独的间隔要高效得多。 允许暂停和恢复排队的超时 在超时上使用标签仅对超时组隔离并执行操作 在浏览器中以及与node.js一起使用 //to set an ever looping timeout (interval) timebot . set ( { period : 400 , loop : true } , function ( i ) { console . log ( 'looped ' + i + ' times' ) ; } ) ; //to set a timeout to execute 3 times timebot . set ( { period : 1200 , loop : 3
JavaScript之定时器详解
1、JS中的定时器有两种：    window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法[function],当方法执行完成定时器停止(但是定时器还在,只不过没用了);    window.setInterval([function],[interval]) 设置一个定时器
JavaScript

87,839

社区成员

224,615

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章