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

news2024/12/27 21:38:41

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.coloradmin.cn/o/480986.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

浙大数据结构与算法一些有意思的理论基础题

堆栈 有人给出了堆栈用数组实现的另一种方式&#xff0c;即直接在函数参数中传递数组和top变量&#xff08;而不是两者组成的结构指针&#xff09;&#xff0c;其中Push操作函数设计如下。这个Push函数正确吗&#xff1f;为什么&#xff1f; #define MaxSize 100 ElementTyp…

Three.js--》Gsap动画库基本使用与原理

目录 Gsap动画库使用讲解 Gsap动画库基本使用 修改自适应画面及双击进入全屏 设置stats性能监视器 Gsap动画库使用讲解 GSAP的全名是GreenSock Animation Platform&#xff0c;是一个从flash时代一直发展到今天的专业动画库&#xff0c;今天将其与three.js进行结合&#x…

【DevOps视频笔记】1. DevOps的诞生

视频官网 目录 一、DevOps介绍 定义&#xff1a; 作用&#xff1a; 核心&#xff1a; 二、软件开发流程 三、流程图 一、DevOps介绍 定义&#xff1a; Development & Operations的缩写&#xff0c;也就是开发&运维DevOps 是一个不断提高效率并且持续不断工作的…

GPIO输出——LED闪烁、LED流水灯、蜂鸣器

1、STM32F1 GPIO 简介 GPIO &#xff08; General Purpose Input Output &#xff09;通用输入输出口 可配置为 8 种输入输出模式 引脚电平&#xff1a; 0V~3.3V &#xff0c;部分引脚可容忍 5V 输出模式下可控制端口输出高低电平&#xff0c;用以驱动 LED 、控制蜂鸣器、模拟通…

Spring 统一功能处理(拦截器)

文章目录 Spring拦截器1.统一用户登录权限校验1) SpringAOP 用户统一验证的问题2) Spring拦截器3) 拦截器实现原理4&#xff09;同一访问前缀添加 2. 统一异常处理3. 统一数据返回格式1&#xff09;统一数据返回的好处2&#xff09;统一数据返回实现 Spring拦截器 SpringBoot统…

第13章 项目合同管理

文章目录 13.2.1 按信息系统 范围 划分的合同分类 4451、总承包合同2、单项工程承包合同3、分包合同 13.2.2 按项目 付款方式 划分的合同分类 4461、总价合同2、成本补偿合同&#xff08;卖方有利&#xff09;3、工料合同 13.3.1 项目合同的内容 44713.3.2 项目合同签订的注意事…

【设计模式】我终于读懂了迭代器模式。。。

看一个具体的需求 编写程序展示一个学校院系结构&#xff1a;需求是这样 要在一个页面中展示出学校的院系组成&#xff0c; 一个学校有多个学院&#xff0c; 一个学院有多个系。 如图&#xff1a; 传统的设计方案(类图) 传统的方式的问题分析 将学院看做是学校的子类&#xf…

深度学习(23):SmoothL1Loss损失函数

0. 基本介绍 SmoothL1Loss是一种常用的损失函数&#xff0c;通常用于回归任务中&#xff0c;其相对于均方差(MSE)损失函数的优势在于对异常值(如过大或过小的离群点)的惩罚更小&#xff0c;从而使模型更加健壮。 SmoothL1Loss的公式为&#xff1a; l o s s ( x , y ) { 0.5 …

机器人中的数值优化(三)—— 无约束最优化方法基础、线搜索准则

本系列文章主要是我在学习《数值优化》过程中的一些笔记和相关思考&#xff0c;主要的学习资料是深蓝学院的课程《机器人中的数值优化》和高立编著的《数值最优化方法》等&#xff0c;本系列文章篇数较多&#xff0c;不定期更新&#xff0c;上半部分介绍无约束优化&#xff0c;…

eureka自我保护模式详解(全网最全)

1. 什么叫自我保护模式&#xff1f; 当微服务客户端启动后&#xff0c;会把自身信息注册到Eureka注册中心&#xff0c;以供其他微服务进行调用。一般情况下&#xff0c;当某个服务不可用时&#xff08;一段时间内没有检测到心跳或者连接超时等&#xff09;&#xff0c;那么Eure…

spring3:更简单的读取和存入对象

目录 1.存储 Bean 对象 1.1 前置⼯作&#xff1a;配置扫描路径&#xff08;重要&#xff09; 1.2 添加注解存储 Bean 对象 1.2.1.Controller[控制器] 1.2.2 Service[服务] 1.2.3 repoistory[仓库] 1.2.4 Configuration[配置] 1.2.5 Component[组件] 1.3为什么要这么多类…

Spring 创建和使用

文章目录 什么是 Bean ?1. 创建 Spring 项目1.创建一个 Maven 项目2. 添加 Spring 依赖1.配置 Maven 国内源2.添加 Maven 依赖 3.添加启动项 2.存储Bean对象1.创建 Bean2.注册 Bean3.获取并使用 Bean 对象1. 得到 Spring 对象常见方式有两种: 2. 获取 Bean 对象Bean 的三种获取…

SpringMVC中使用LocalDateTime、LocalDate等参数作为入参数据转换问题

1、接收GET请求方式及POST请求表单方式时间类型传参&#xff0c;需要自定义参数转换器或者使用ControllerAdvice配合initBind&#xff0c;不设置的话表单方式会报以下错误&#xff1a; 这种情况要和时间作为Json字符串时区别对待&#xff0c;因为前端json转后端pojo底层使用的是…

什么是Auto GPT-4? OpenAI 最新语言模型概览

动动发财的小手&#xff0c;点个赞吧&#xff01; 人工智能正在快速发展&#xff0c;近年来最令人兴奋的发展之一是创建可以生成类似人类文本的语言模型。领先的人工智能研究机构 OpenAI 最近发布了其最新的语言模型 Auto GPT-4。 在什么是 Auto GPT-4&#xff1f; OpenAI 最新…

【Java笔试强训 29】

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 一、选择题 二、编程题 &#x1f525;求正数数…

AtCoder Beginner Contest 300(D-G)

D - AABCC (atcoder.jp) &#xff08;1&#xff09;题目大意 给你个数N&#xff0c;问你不超过N的三个质数abc组成的数有多少个。 &#xff08;2&#xff09;解题思路 考虑到枚举的数不会特别多&#xff0c;因此预处理出1e6的质因子&#xff0c;暴力枚举即可。 &#xff08;3&a…

在体育新闻文本中提取关键词可以使用什么技术

在体育新闻文本中提取关键词可以使用以下技术&#xff1a; 1. 领域词典&#xff1a; 通过构建体育领域的词汇表&#xff0c;将其中的词语作为关键词&#xff0c;可以较好地提取体育新闻中的关键词。 就当下的研究情况&#xff0c;国内外有哪些体育领域的词汇表http://t.csdn…

Reactive Streams介绍与应用分析

目录 一、Reactive Streams基本知识 &#xff08;一&#xff09;基本介绍 &#xff08;二&#xff09;反应式流的特点 基本特性1:事件驱动&变化传递 基本特性2:数据流 基本特性3:声明式 高级特性1:流量控制&#xff08;回压&#xff09; 高级特性2:异步边界 &…

ALBEF:基于动量蒸馏的视觉语言表示学习

Align before Fuse&#xff1a;Vision and Language Representation Learning with Momentum Distillation ALBEF&#xff1a;基于动量蒸馏的视觉语言表示学习 摘要 大规模的视觉和语言表征学习在各种视觉-语言任务上显示出有希望的改进。大多数现有的方法采用了基于Transform…

【平衡二叉搜索树(AVL)-- 旋转】

目录&#xff1a; 前言1、二叉搜索树的插入2、AVL树的旋转&#xff08;1&#xff09;右单旋&#xff08;LL&#xff09;&#xff08;2&#xff09;左单旋&#xff08;RR&#xff09;&#xff08;3&#xff09;右左双旋&#xff08;LR&#xff09;&#xff08;4&#xff09;左右…