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

news/2024/10/18 0:27:57/

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的参数。

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实例代码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的同步问题。


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

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;}
}

或者如下面代码所示,页面也不会报错或者卡壳。

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);}

http://www.ppmy.cn/news/80327.html

相关文章

多态的原理、单继承和多继承的虚函数表、以及虚函数表的打印。

一、多态原理 1、下面这个结果是多少&#xff1f; class A { public:virtual void func(){cout << "func()" << endl;}private:int _a 1; };int main() {printf("%d\n", sizeof(A));return 0; } 是 4&#xff1f;8&#xff1f;还是多少&am…

CSS3多列布局:达到无与伦比的网站排版

随着互联网技术的日益发展&#xff0c;网站排版也变得越来越重要。对于网站设计师而言&#xff0c;如何用 CSS3 实现美观、简洁、灵活的多列布局是一项必修的技能。在本篇文章中&#xff0c;我们将会一步步介绍 CSS3 多列布局的使用方法&#xff0c;带你完成一个完整的布局&…

npm i 常见问题

需要注意的是&#xff0c;如果你在使用 NPM 安装包的过程中遇到了任何问题&#xff0c;可以尝试使用 --verbose 参数打印更详细的错误信息&#xff0c;以便更好地诊断问题。例如&#xff1a; npm install --verbose 1、vue老项目缺少编译环境安装依赖报错的问题 待下载的项目…

Splunk安装配置

前言 Splunk 社区 &#xff0c;包括白皮书&#xff0c;各类手册&#xff0c;资源下载&#xff0c;社区问答等 入门&#xff1a;Splunk 入门指南 | Splunk 手册&#xff1a;Splunk Enterprise - Splunk Documentation 资源下载:数据可视化工具Splunk Enterprise免费下载 | S…

python绘制密度图

本期目录 1、绘图参数2、使用 matplotlib 库绘制密度图时常用的参数3、案例4、 运行结果python绘图往期系列文章目录 1、绘图参数 可以使用多种库来绘制密度图&#xff0c;其中最常用的是 seaborn 和 matplotlib。以下是使用 seaborn 库绘制密度图时常用的参数&#xff1a; i…

【网络编程】协议定制+Json序列化与反序列化

目录 一、序列化与反序列化的概念 二、自定义协议设计一个网络计算器 2.1TCP协议&#xff0c;如何保证接收方收到了完整的报文呢&#xff1f; 2.2自定义协议的实现 2.3自定义协议在客户端与服务器中的实现 三、使用Json进行序列化和反序列化 3.1jsoncpp库的安装 3.2改造…

如何用c++制作人生模拟器

要制作一个人生模拟器&#xff0c;首先需要设计游戏的基本框架&#xff0c;并构思游戏的玩法&#xff0c;规则和内容。 然后&#xff0c;在C中实现这个框架并添加游戏所需的各种类、函数和变量。其中&#xff0c;有几个关键的方面需要考虑&#xff1a; 模拟生命周期&#xff…

BigDecimal类型的数据如何保留小数点后四位

BigDecimal类型的数据如何保留小数点后四位 下面是使用Java的BigDecimal类来保留小数点后四位的示例&#xff1a; import java.math.BigDecimal; import java.math.RoundingMode;public class Main {public static void main(String[] args) {BigDecimal number new BigDecima…