清除setTimeout

如图,go是一个递归函数,显示出来的是一个向右运动的动画,但是此时,我有一个需求,就是需要在运动指定时间后,清除setTimeout,结束动画。首先,得想清楚,结束的判断条件是什么,当然,想当然的是使用如图中的L值做判断,满足给定的对L的条件,就结束动画,比如if(L == 100){

clearTimeout(timer)

},但是,我现在不行这样判断,让我们先来研究下setTimeout,看看它的返回值是什么,我在函数中console.log(timer),在浏览器控制台中打印出如图所示信息:

然后我再console.log(typeof timer),打印出如下图所示信息:

可以看出,timer的返回值是number类型的,而且timer的返回值是从0开始递增的,因此,判断条件就有了,就是根据timer的返回值进行判断,比如if(timer == 100){

clearTimeout(timer)

},当timer递增到100时,setTimeout被清除,动画停止,由于我这里的“L”是从“0”开始递增的,所以,对应的此时的left值也是100了,实际工作中,我设想,可以利用timer的返回值做些事情,比如这里,如图

一般情况下,我们如果仅仅是利用递归去增大一个值得话,像这里,就只能去声明一个变量,然后将变量值在每次递归中去增加10,但是有了timer的返回值,就方便了很多,真正这东西有哪些用途,我也还没想到过,相信我慢慢的会找到它的用途的。

回到如何清除setTimeout这里来,在判断是否满足条件后,我们可以用clearTimeout去清除,同时,我们也可以通过将timer值赋值为0来清除,当然有时候也可能会因为需求而将timer赋值为其它值,在这里,当我return false之后,函数就终止了,setTimeout就被清除了,如果没有return false,我们还可以根据timer的值对height产生影响,我还没深入想,待我慢慢找到它的用途吧。

假设我现在把这个动画效果改进下,如图

之前动画是在到达目标值后不会将left值归为0的,但是这个归为0了,也就是动画变成循环的了,我现在有个需求,就是我只想让这个动画来回运动3次,我们可以利用这个timer来做,如图,取得目标值时的timer值

运动三次,在不去显式调整timer的情况下,那就是timer大于600时,停止动画,如图

在循环三次后,就跳出递归了,动画停止

时间: 2024-11-02 23:45:34

清除setTimeout的相关文章

在js总使用setTimeout的注意事项

setTimeout 在 js 中的使用频率很高,最常见的就是计时器. setTimeout 的使用方法很简单 var r = setTimeout(func , 1000); 首先它是用返回值,可以利用返回值来清除setTimeout ,clearTimeout(r) setTimeout 的调用方式 setTimeout(func , 1000); setTimeout("func()" , 1000); setTimeout(function(){func ()} , 1000)

JS中的定时函数(setTimeout,clearTimeout,setInterval,clearInterval详解 )

设置定时器,在一段时间之后执行指定的代码,setTimeout与setInterval的区别在于setTimeout函数指定的代码仅执行一次 方法一: window.setTimeout("alert('ok')",5000); 方法二: window.setTimeout(function() { alert("Ok"); }, 5000); 方法三: function showAlert() { alert("ok"); } window.s

vue中使用setTimeout

在vue的函数中使用setTimeout self.distroyTimeout = setTimeout(()=>{ self.initData() },1000) 这时清除setTimeout需要在destoryed周期中进行 destoryed(){ window.clearTimeout(this.distroyTimeout) } 但是这样做在逻辑复杂的情况下还是出现了没有关闭setTimeout的情况,以下是一种更好的解决方案 let self = this if(self &&

setTimeout,clearTimeout,setInterval,clearInteral详解

设置定时器,在一段时间之后执行指定的代码,setTimeout与setInterval的区别在于setTimeout函数指定的代码仅执行一次 方法一: window.setTimeout("alert('ok')",5000); 方法二: window.setTimeout(function(){ alert("Ok");}, 5000); 方法三: function showAlert(){ alert("ok");}window.setTim

setTimeout与setInterval对比

这其实是一个小知识点:setTimeout是m毫秒执行一次后,就不执行:而setInterval是每隔m毫秒执行一次.其实他们是可以互相转换的,比如以下: setTimeout实例: var refresh=function(){ console.log(new Date()); setTimeout('refresh()',5000); }; refresh(); setInterval实例: setInterval(function(){ console.log(new Date()); }

setTimeout应用例子-移入移出div显示和隐藏

效果:移入div1,div2保持显示,移出div1,div2消失. 移入div2,div2保持显示,移出div2,div2消失. 一.HTML代码 <div id='div1'></div> <div id='div2'></div> 就g只有两个div模块,移入一个,显示另外一个. 二.CSS代码 给两个div抹上颜色,便于区别,在css里,我设置了float 属性,定义元素在左边方向浮动 1 #div1{ 2 height:50px; 3 backgro

JavaScript对象(window)

DOM:文档对象模型文档:标签文档.网页 对象:文档中每个元素对象 模型:抽象化的东西 操作页面里边的所有内容,把每个内容看做对象 事件:预先设定好的程序,当满足没某个特定的条件的时候触发. <body> <input type="button" value="点击" onClick="dianJi()"/> onclick后边的内容是调用了一个方法,写这个方法的时候要加上括号 </body> <scri

HTML静态网页--JavaScript-DOW操作

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发)

BOM总结

BOM(浏览器对象模型),提供了独立于页面内容而与浏览器窗口进行交互的对象.使用BOM,开发者可以移动窗口.改变状态栏的文本以及执行其他与页面内容不直接的动作.BOM由一系列相关的对象构成. 一.window 对象 window对象是整个BOM的核心,所有对象和集合都以某种方式与window对象关联. 1.窗口操作 window对象调整窗口的大小和位置: 1)window.moveBy(dx,dy)--将浏览器窗口相对当前位置水平或垂直移动(px)到指定的距离(相对定位): 2)window.m