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-位…

安全SCDN对网站蜘蛛抓取有影响吗,使用SCDN对百度蜘蛛抓取有否好处

目前网站使用德迅云安全SCDN情况非常普遍&#xff0c;但也有些客户是第一次了解使用SCDN&#xff0c;会有担心一个百度蜘蛛抓取问题&#xff0c;担心使用了SCDN之后会影响百度蜘蛛抓取。其实是完全不必担心这个的&#xff0c;从理论上来讲&#xff0c;使用了SCDN并不会影响百度…

【Collection - LinkedList源码解析】

本文主要对Collection - LinkedList进行源码解析。 Collection - LinkedList源码解析 概述LinkedList实现 底层数据结构构造函数getFirst(), getLast()removeFirst(), removeLast(), remove(e), remove(index)add()addAll()clear()Positional Access 方法查找操作Queue 方法Deq…

【大学英语视听说上】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;分别…

【论文阅读】-使用小波变换进行数字图像模糊检测

使用小波变换进行数字图像模糊检测 文章目录 使用小波变换进行数字图像模糊检测1、论文提出的背景2、论文提出的模糊检测方案2.1 不同边缘的模糊效果2.2 边缘类型和锐度检测2.3 方案实现步骤3、论文方案Python实现4、实验结果及总结本文将详细介绍 Hanghang Tong 、Mingjing Li…

分页助手入门以及小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;侵权可删

10个高级技巧提升你的Python代码Level!!!(建议收藏)

Python是一种功能强大且广泛应用于各个领域的编程语言。无论你是初学者还是有一定经验的开发者&#xff0c;掌握一些高级技巧可以大大提升你的Python编程能力&#xff0c;使你的代码更加高效、可靠和易于维护。本文将介绍10个提升Python编程技能的高级技巧&#xff0c;帮助你在…

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

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

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

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

什么是依概率收敛

定义 设 X 1 , X 2 , . . . , X n , . . . X_1,X_2,...,X_n,... X1​,X2​,...,Xn​,... 是一个随机变量序列&#xff0c; A A A 是一个常数&#xff0c;如果对任意 ϵ > 0 \epsilon>0 ϵ>0&#xff0c;有 lim ⁡ n → ∞ P { ∣ X n − A ∣ < ϵ } 1 \lim_{n\…

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领航班系列(十九)】 大家好,我是博主侯小啾, 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ…

Android 13 - Media框架(22)- ACodecBufferChannel

这一节我们将了解 ACodecBufferChannel 中的 buffer 传输机制 status_t ACodecBufferChannel::queueInputBuffer(const sp<MediaCodecBuffer> &buffer) {std::shared_ptr<const std::vector<const BufferInfo>> array(std::atomic_load(&mInputBuffe…

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&…