js中setinterval怎么用?怎么才能让setinterval停下来?

这篇具有很好参考价值的文章主要介绍了js中setinterval怎么用?怎么才能让setinterval停下来?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

setinterval()是定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setinterval()的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

由 setInterval()返回的ID值可用作clearInterval() 方法的参数。 

setInterval动作的语法格式如下:

setInterval(function,interval[,arg1,arg2,......argn])
setInterval(object,methodName,interval[,arg1,arg2,.....argn])

后面就两个参数code是你的js代码,millisec为时间间隔,以毫秒计。

第一种格式是标准动作面板中setInterval函数的默认语法,第二种格式是在专家模式动作中使用的方法。

其中的参数function是一个函数名或者一个对匿名函数的引用。

object参数指定从Object对象派生的对象。

methodName制定 object参数中要调用的方法。

interval制定对function或methodName调用两次之间的时间,单位是毫秒。

后面的arg1等是可选的参数,用于制定传递给function或是methodName的参数。

js中setinterval怎么用?怎么才能让setinterval停下来?

setInterval它设置的时间间隔小于动画帧速(如每秒10帧,相当于100毫秒),则按照尽可能接近interval的时间间隔调用函数。而且必须使用updateAfterEvent动作来确保以足够的频率刷新屏幕。如果interval大于动画帧速,则只用在每次播放头进入某一帧是才调用,以减小每次刷新屏幕的影响。

下面的例子每隔1秒调用一次匿名函数。


setInterval(function(){trace("每隔1秒钟我就会显示一次")},1000);//这里的function(){}是没有函数名的函数。成为匿名函数,后面的1000是时间间隔,单位是毫秒。

function show1(){
    trace("每隔1秒显示一次");
}
function show2(str){
    trace(str);
}
setInterval(show1,1000);
setInterval(show2,2000,"每隔2秒我就会显示一次");

上面已经将函数的setInterval方法介绍了。下面我们将介绍对象的setInterval方法。

首先,写一个setInterval在动作中调用对象的方法的例子,该例子不需要传递参数。

myobj=new Object();//创建一个新的对象
myobj.interval=function){
    trace("每隔1秒显示一次");
}//创建对象的方法。
setInterval(myobj,"interval",1000);//设定时间间隔调用对象的方法。

接下来介绍如何传递参数。其实道理和函数的传递参数是一样的。

myobj=new Object();
myobj.interval-function(str){
    trace(str);
}
setInterval(myobj,"interval",2000," 每隔2秒我就会显示一次");

注意。要调用为对象定义的方法时,必须在专家模式中使用第二种语法格式。这样子的话呢,我们来作一个动态显示时间的画面。可以用下面的代码实现。

setInterval(show,1000);
function show(){
    time=new Date();
    hour=time.getHours();
       minu=time.getMinutes();
       sec=time.get.Seconds();
    datetime=hour+":"+minu+":"+sec;
}//这里的datetime是一个动态文本框的变量名字。

用clearinterval命令让setinterval停下来

时间间隔可以用 setInterval 命令来创建并用 clearInterval 命令来终止。setInterval 所用的参数有两种格式。在第一种格式中,你传递给 setInterval 的参数可以是一个函数名,一段时间上的间隔以及一些传递给前面函数的相关参数。当 setInterval 运行时它会依照规定的时间间隔依次将列出的参数传递给指定的函数,直到你调用 clearInterval 将其终止。相关的示范代码如下: 

function show(){ 
    trace("每隔一秒我就会显示一次"); 
} 
var sh; 
sh=setInterval(show,1000); 
clearInterval(sh); 

js中setinterval怎么用?怎么才能让setinterval停下来?

js实例代码1:

function auto(){ 
    alert("到時間了") 
} 
var monitorInterval = null;  
function setAuto(time,isFrist){ 
    var intervalTime=time; 
    if(isFrist!="1"){ 
        if(intervalTime!="off"){ 
            monitorInterval= setInterval("auto()", intervalTime*1000); 
        }else{ 
            if(monitorInterval){    
                clearInterval(monitorInterval); 
                monitorInterval = null; 
            } 
        } 
    } 
} 

html实例代码2:

<table> 
    <tr> 
        <td nowrap="nowrap" bgcolor="#E8E8E8">自動更新</td> 
        <td align="left" bgcolor="#E8E8E8">
            <select onchange="setAuto(this.value,'0')"> 
                <option value="10">10sec</option> 
                <option value="20">20sec</option> 
                <option value="30">30sec</option> 
                <option value="60">1min</option> 
                <option value="300">5min</option> 
                <option value="600">10min</option> 
                <option value="1800">30min</option> 
                <option value="3600">60min</option> 
                <option value="off">Stay</option> 
            </select>
        </td> 
    </tr> 
</table> 

使用setinterval同步加载Ext多个Store

我们知道Ext js加载Store是异步加载的,这有很多好处,这里不再说明。但有时也需要多个store同步加载,比如:动态解析生成图表,需要同时加载完成图表样式、图表轴、图表序列和图表数据之后才能完整解析生成图表,任意一个store没有加载完成时,解析数据都会造成解析错误,所以必须保证全部store加载完成后才能正确进行解析。要怎么保存多个store加载的同步呢?具体实现如下:

var bChartArr =[false, false, false, false];  
//加载图表轴  
Ext.getStore("ChartAxes").load({  
    params:{ queryId:queryId },  
    callback:function(){  
        bChartArr[0] = true;  
    }  
});  
//加载图表序列  
Ext.getStore("ChartSeries").load({  
    params:{ queryId:queryId },  
    callback:function(){  
        bChartArr[1] = true;  
    }  
  
});  
//加载图表样式  
Ext.getStore("ChartStyle").load({  
    params:{ queryId:queryId },  
    callback:function(){  
        bChartArr[2] = true;  
    }  
});  
// 按钮  
Ext.getStore("Buttons").load({  
    params:{query_id:queryId},  
    scope:this,  
    callback:function(){  
        bChartArr[3] = true;  
    }  
});  
var me = this;  
// 等待所有的Storoe加载完成后执行  
var timer = setInterval(function(){  
    if(bChartArr[0] && bChartArr[1] && bChartArr[2] && bChartArr[3]){  
        clearInterval(timer); // 清除等待  
        // 解析图表样式、轴、序列动态生成图表  
        me.createChartPanel();  
    }  
},100);  

这样就有效的解决了Ext多个异步加载的store的同步问题。


说明:这里使用了数组来判断数据是否加载完成。其实另外两个方法应该也是可以的:

js中setinterval怎么用?怎么才能让setinterval停下来?

1、使用一个计数代替数组,每个store加载完成时给计数加1,最后判断计数达到预期值;

2、对Store不使用callback,而使用store的isLoading()方法,当所有Stroe的isLoading( )都返回false时认为加载完成。


在JS脚本中,多个setinterval之间出现干扰怎么办?

不能同时执行是肯定的,必然有一个先后次序,但是可以几乎是同时运行。如果你确定是互扰的问题,可以只定义一个setinterval,例如:

var timeIntervalNumber = 1;
var timeInterval = setInterval('doSomething()', 1000);
function doSomething() {
    if (timeIntervalNumber % 2) {...}
    if (timeIntervalNumber % 5) {...}
    timeIntervalNumber ++;
    if (timeIntervalNumber >= 2 * 5) {
        timeIntervalNumber = 1;
    }
}

或者如下面代码所示,页面也不会报错或者卡壳。文章来源地址https://www.toymoban.com/news/detail-434716.html

var firstInterval;
var secondInterval;
function firstAlert(){
	if(firstInterval) clearInterval(firstInterval);
<span style="white-space:pre">	</span>//处理所有
<span style="white-space:pre">	</span>.........
<span style="white-space:pre">	</span>firstInterval = setInterval('firstAlert()', 1000*2);
}


function secondAlert(){
	if(secondInterval) clearInterval(secondInterval);
<span style="white-space:pre">	</span>//处理所有
<span style="white-space:pre">	</span>.......


secondInterval = setInterval('secondAlert()', 1000*3);
	}

到了这里,关于js中setinterval怎么用?怎么才能让setinterval停下来?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 码链跳转小程序怎么用?怎么才能接入?

    最近,关注微信站外跳转的小伙伴,可能注意到了一系列的跳转小程序的活跃。这类小程序都叫做码链系列,码链运营服务,码链运营服务助手,码链运营小助手,码链运营助手,码链运营管家,码链运营小管家,码链运营星等小程序。 码链类的小程序是原来腾讯营销通的产

    2024年02月04日
    浏览(46)
  • 路由器怎么才能设置成交换机?

    公司或者学校有很多地方的网线口少的很,所以大家会买交换机或者路由器,WiFi的未来是是趋势所以很多人会选择路由器,所以就会涉及到登陆的问题,一般是每个人都有自己的登录账号或者密码的,这时怎么办呢。 1、将网线的一端连在网络接口上,网线接通,将路由器拆

    2024年02月08日
    浏览(68)
  • 怎么才能真正理解服务器是什么?

    构成互联网世界的基本节点是一个又一个的计算机和网络设备。 服务器是提供特定服务的计算机,你平时用的计算机叫做终端设备。他们在机器上的本质是一样的,但因为承担不同的角色,所以有一些区别: 0、归属与成本 服务器:属于提供服务者,一般是公司等团体组织需

    2024年02月09日
    浏览(41)
  • 怎么才能远程控制笔记本电脑?

    为什么AnyViewer是远程控制笔记本电脑软件的首选?以下是选择AnyViewer成为笔记本电脑远程控制软件的主要因素。         跨平台能力 AnyViewer作为一款跨平台远程控制软件,不仅可以用于从一台Windows电脑远程控制另一台Windows电脑,还可以从iOS和Android设备远程控制电脑。   

    2024年02月14日
    浏览(63)
  • 路由器ip地址怎么设置才能上网

    在互联网时代,路由器已经成为了我们生活中不可或缺的一部分。而路由器的IP地址则是路由器配置的关键。那么,如何设置路由器的IP地址才能上网呢?虎观代理小二二将为您提供详细的步骤和指导。 一、确认路由器IP地址 在开始设置路由器的IP地址之前,您需要先确定您的

    2024年02月06日
    浏览(51)
  • 【计算机考研】408要怎么复习,才能130+?

    计算机组成原理:理解计算机硬件的工作原理,是理解其他课程的基础。 数据结构:算法的基石,建议作为复习的起点,因为它最像“数学”,一旦掌握,不易遗忘。 操作系统:理解计算机系统资源的管理与调度。 计算机网络:网络通信的基本原理和协议。 王道视频课程:

    2024年04月09日
    浏览(45)
  • 新买的360WiFi该怎么设置才能上网?

    小伙伴们在网上买回来360随身WiFi后不知道该怎么用,不用急,现在就详细为你演示,你的WiFi马上就能用了。 1、首先先把随身WiFi插在USB接口上,然后登陆百度搜索“360随身WiFi驱动”,在搜索结果里下载驱动(图1)然后打开,无需安装,打开后点击“立即使用”即可。 2、现

    2024年02月08日
    浏览(48)
  • macbook电脑删除app怎么才能彻底清理?

    macBook是苹果公司推出的一款笔记本电脑,它的操作系统是macOS。在macBook上安装的app可能会占用大量的存储空间,因此,当我们不再需要某个app时,需要将其彻底删除。 macbook删除app ,怎么才能彻底呢?本文将给大家介绍以下三种方法。 一、使用第三方清理工具删除app macboo

    2024年02月07日
    浏览(51)
  • 怎么才能最短时、高效、踏实的学习 Python?

    浅谈Python数据分析的学习路线 Python是一种相对容易学习的编程语言,它的语法非常简单,并且它具有良好的可读性和易用性。这使得初学者能够更快地掌握编程基础知识,如变量、循环和条件语句等。Python还有大量的教程和文档,以及丰富的社区支持,这使得新手可以轻松地

    2023年04月25日
    浏览(79)
  • 怎么才能彻底清理手机呢,来学这些方法吧

    清理方法一:清除缓存 我们下载的软件越多,它占用的内存就越多。内存满了我们就卸载。这样卸载只是清理了软件的大小,我们使用的软件数据依然存在。 如果想彻底清除,可以先找到【应用信息】,然后选择【清除数据】,再选择【清除所有数据】,最后点击【卸载】

    2024年02月08日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包