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

JavaScript

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

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

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.mzph.cn/news/192871.shtml

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

相关文章

Leetcode刷题详解——乘积最大子数组

1. 题目链接&#xff1a;152. 乘积最大子数组 2. 题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;请你找出数组中乘积最大的非空连续子数组&#xff08;该子数组中至少包含一个数字&#xff09;&#xff0c;并返回该子数组所对应的乘积。 测试用例的答案是一个 32-位…

【大学英语视听说上】Mid-term Test 2

Section A 【短篇新闻1】 You probably think college students are experts at sleeping, but parties, preparations for tests, personal problems and general stress can rack a students sleep habits, which can be bad for the body and the mind. Texas Tech Univer…

JavaWeb(一)

一、Javaweb介绍 Web&#xff1a;全球广域网&#xff0c;也称为万维网(www)&#xff0c;能够通过浏览器访问的网站。 JavaWeb&#xff1a;使用Java技术进行web互联网开发。 总结: 1、JavaWeb就是使用Java技术进行web互联网开发 2、一个web项目包含三个部分&#xff0c;分别…

分页助手入门以及小bug,报sql语法错误

导入坐标 5版本以上的分页助手 可以不用手动指定数据库语言&#xff0c;它会自动识别 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.3.2</version> </dependency&g…

(C语言)逆序输出字符串

#include<stdio.h> #include<string.h> int main() {int i;char s[100];scanf("%s",&s);int count strlen(s);for(int i count -1;i > 0; i --)printf("%c",s[i]);return 0;} 代码运行截图&#xff1a; 注&#xff1a;侵权可删

五子棋AI算法自动测试方法

先前发了几篇五子棋游戏程序设计的博文&#xff0c;设计了游戏程序&#xff0c;也设计了AI智能奕棋的算法&#xff0c;运行程序检测算法的可行性&#xff0c;完成人机模式游戏功能的设置。 本文主要介绍自动测试算法的方法。 AI智能奕棋的算法testAIq( )&#xff0c;主要是检测…

前端项目打包和自动化部署(jenkins+gitee+nginx)

项目打包和自动化部署 一. 项目部署和DevOps 1. 传统的开发模式 在传统的开发模式中&#xff0c;开发的整个过程是按部就班就行&#xff1a; 但是这种模式存在很大的弊端&#xff1a; 工作的不协调&#xff1a;开发人员在开发阶段&#xff0c;测试和运维人员其实是处于等待…

SmartSoftHelp8,文件/文件夹,Web服务器IIS文件安全设置工具

工作文件&#xff0c;文件夹 web服务器 iis 文件&#xff0c;文件夹安全设置 用户&#xff1a; administrator user guest everyone 权限&#xff1a; 完全控制&#xff08;读、写&#xff09; 只读 读取 写入 修改 读取和执行 下载地址&#xff1a; https://p…

WPF绘图---Canvas中Polygon屏幕居中显示

问题描述 在一个Canvas中绘制了多个Polygon&#xff0c;由于坐标可能超出界面显示范围&#xff0c;需要将绘制的Polygon居中显示&#xff0c;并且缩放至界面大小&#xff0c;效果如下&#xff1a; xaml代码 <Borderx:Name"border"Background"#fff"Cli…

WebGL笔记:矩阵旋转运算的原理和实现

矩阵 矩阵&#xff08;Matrix&#xff09;是一个按照矩形纵横排列的复数集合 矩阵就像一个矩形的阵盘&#xff0c;通过其中纵横排列的元素我们可以摆出不同功能的阵法&#xff0c;比如位移矩阵、旋转矩阵、缩放矩阵 …在矩阵中的每一行&#xff0c;或者每一列数字构成的集合&a…

每日一练2023.12.2——正整数A+B【PTA】

题目链接&#xff1a;L1-025 正整数AB 题目要求&#xff1a; 题的目标很简单&#xff0c;就是求两个正整数A和B的和&#xff0c;其中A和B都在区间[1,1000]。稍微有点麻烦的是&#xff0c;输入并不保证是两个正整数。 输入格式&#xff1a; 输入在一行给出A和B&#xff0c;…

Python面向对象①类与特殊方法【侯小啾python领航班系列(十九)】

Python面向对象①类与特殊方法【侯小啾python领航班系列(十九)】 大家好,我是博主侯小啾, 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ…

Pikachu(三)

RCE(remote command/code execute)概述 RCE漏洞&#xff0c;可以让攻击者直接向后台服务器远程注入操作系统命令或者代码&#xff0c;从而控制后台系统。 远程系统命令执行 一般出现这种漏洞&#xff0c;是因为应用系统从设计上需要给用户提供指定的远程命令操作的接口 比如我…

flink源码分析之功能组件(四)-slot管理组件I

简介 本系列是flink源码分析的第二个系列&#xff0c;上一个《flink源码分析之集群与资源》分析集群与资源&#xff0c;本系列分析功能组件&#xff0c;kubeclient&#xff0c;rpc&#xff0c;心跳&#xff0c;高可用&#xff0c;slotpool&#xff0c;rest&#xff0c;metrics&…

docker+jmeter+influxdb+granfana

centos7国内阿里源安装docker 1、安装必要的系统工具 sudo yum install -y yum-utils device-mapper-persistent-data lvm2 2添加官方仓库 sudo yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.reposudo sed -i sdownload.doc…

Knowledge Review(CVPR 2021)论文解析

paper&#xff1a;Distilling Knowledge via Knowledge Review official implementation&#xff1a;https://github.com/dvlab-research/ReviewKD 前言 识蒸馏将知识从教师网络转移到学生网络&#xff0c;可以提高学生网络的性能&#xff0c;作为一种“模型压缩”的方法被…

np.array无法直接用matplotlib画图,因为需要借用np.squeeze先转化

文章目录 前言一、使用步骤1.没使用np.squeeze转化2.使用np.squeeze转化 前言 实际工作中&#xff0c;时而难免会遇见np.array无法直接用matplotlib画图的情况&#xff0c;这个时候&#xff0c;是因为在画图之前少了一个步骤&#xff0c;需要先借用np.squeeze先转化 一、使用步…

如何学习 Spring ?学习 Spring 前要学习什么?

整理了一下Spring的核心概念BeanDefinitionBeanDefinition表示Bean定义&#xff0c;BeanDefinition中存在很多属性用来描述一个Bean的特点。比如&#xff1a;class&#xff0c;表示Bean类型scope&#xff0c;表示Bean作用域&#xff0c;单例或原型等lazyInit&#xff1a;表示Be…

Matlab 在一个文件中调用另一个文件中的函数

文章目录 Part.I IntroductionPart.II 方法Chap.I A 文件中只有一个函数Chap.II A 文件中有多个函数 Part.I Introduction 本文介绍一下在脚本文件 B 中调用文件 A 中的函数的方法。 Part.II 方法 目的&#xff1a;在文件B.m调用A.m中的函数 默认两个文件在一个文件夹下&…

力扣611题 有效三角形的个数 双指针算法

611. 有效三角形的个数 给定一个包含非负整数的数组 nums &#xff0c;返回其中可以组成三角形三条边的三元组个数。 示例 1: 输⼊: nums [2,2,3,4] 输出: 3 解释:有效的组合是: 2,3,4 (使⽤第⼀个 2) 2,3,4 (使⽤第⼆个 2) 2,2,3 ⽰例 2: 输⼊: nums [4,2,3,4] 输出: 4 解…