SetInterval方法在onclick事件上只执行一次

是因为SetInterval方法是用来重复执行指定的代码块或函数，而onclick事件只会在元素被点击时触发一次。

SetInterval方法是JavaScript中的一个定时器函数，它接受两个参数：一个函数或代码块，以及一个时间间隔（以毫秒为单位）。当调用SetInterval方法后，指定的函数或代码块会按照指定的时间间隔重复执行。

而onclick事件是HTML中的一个事件属性，用于指定当元素被点击时要执行的代码。当元素被点击时，onclick事件会触发，并执行相应的代码。

因此，当将SetInterval方法绑定到onclick事件上时，它只会在元素被点击时执行一次，而不会重复执行。如果希望SetInterval方法能够重复执行，可以将其绑定到其他事件上，或者使用SetTimeout方法来实现延时执行。

腾讯云相关产品和产品介绍链接地址：

云函数（SCF）：https://cloud.tencent.com/product/scf
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iot
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Tencent Real-Time Rendering Engine）：https://cloud.tencent.com/product/trre

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

不使用jquery只执行一次事件侦听器函数

我制作了一段代码,用箭头上下垂直移动6个项目前面的元素.当按下enter时,我将加载一组带有该项目的图像.代码工作正常,但在输入命中后,这段代码需要停止,所以我可以用箭头键做其他事情并输入.现在它只是在输入被击中后继续前进...startup(6); break; } } }); } Mati Tucci.. 9 现在你可以once在options.../API/EventTarget/addEventListener 浏览器兼容性: Chrome 55,Firefox 50,Safari(WebKit). 2> Kolby..：如果要停止所有键事件...,只需删除事件侦听器即可. var enterPushed = false; var handleKeyDown = function(){ if(event.keyCode == 38){...keydown', handleKeyDown); } }; document.addEventListener('keydown', handleKeyDown); 如果你想停止只听输入或特定键

1611 0

JavaScript（18）

setTimeout()方法与setInterval()方法的语法很相似，实际上这两者在用法方面区别非常大。...其中setTimeout()方法内的代码只会执行一次，而setInterval()方法内的代码会重复性执行，除非你使用clearInterval()方法来取消执行。举例： <!...： image.png 分析： window.onload表示在页面加载完毕执行，在“JavaScript页面相关事件”我们会详细讲解到。...如果这个例子使用setTimeout方法就不能实现了，因为setTimeout()方法只会执行一次，而setInterval()会重复执行。举例： <!...()； 2、setTimeout()方法内的代码只会执行一次，而setInterval()方法内的代码会重复性执行。

4942 0

JS DOM学习笔记

delay);//每过delay毫秒就调用一次method函数，相当于是计时器 4、window.clearInterval(name); //取消计时器name //setInterval(method...(method, delay); //deay毫秒之后执行method函数，和setInterval的区别是setTimeout只执行一次，setInterval可以不断的执行无数次 6、onload(...document.getElementById("控件Id")来获取标签对象 8、事件：onclick(单击)、ondblclick(双击)、onkeydown（按键按下）、onkeypress(按下按键...动态为网页或元素绑定事件，在IE中绑定事件的方法是attachEvent；在FireFox中绑定事件的方法是addEventListener jQuery之类的框架进行了封装，解决了不同浏览器上Dom...的不同 14、jQuery的ready和Dom的onload的区别：window.onload只能注册一次，是在所有的Dom元素创建完毕、图片、CSS都加载完毕后才被触发；而jQuery的ready则是在

4K4 0

JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)

clearInterval: window.clearInterval(iIntervalID) 使用 setInterval 方法取消先前开始的间隔事件。...; alert(boo); } //2 setTimeout方法---只激活一次动作，setInterval方法...timer2 = setInterval(methodDemo, 3000);//每隔2秒，会执行一次：alert('时间到...') } function...对象中的事件 onload 在浏览器完成对象的装载后立即触发。...onload事件是在浏览器解析完页面文档时触发， //只有当该事件触发时才会调用它的事件处理方法 window.onload = function(){

5611 0

javaWeb核心技术第三篇之JavaScript第一篇

- for(){}方式 - 函数 "用来完成指定操作的代码片段,在java中叫方法,在js中叫函数" - 方式1: 普通函数 " function...); "周期执行,每隔多少毫秒执行一次指定函数" - 注意:每个定时器都会返回一个定时器id,定时器id主要用在清除定时器时...- 格式2:setInterval("函数名称(参数列表)",毫秒值); - "周期执行,每隔多少毫秒执行一次指定函数可传递参数"...- setTimeout() 单次执行定时器 - 格式1:setTimeout(函数名称,毫秒值); "单次执行,多少毫秒后执行指定函数,只执行一次..." - 格式2:setTimeout("函数名称(参数列表)",毫秒值); "单次执行,多少毫秒后执行指定函数,只执行一次可传递参数"

2.3K1 0

开篇：通过 state 阐述 React 渲染

setInterval 函数每隔1秒执行一次，但 count 结果一直是1。...以下是 setInterval 函数通知 React 要做的事情：前提：useEffect(() => {}, []) 1只执行一次，不会在组件任何的 props 或 state 发生改变时重新运行。...每隔1秒，执行一次上述操作尽管每1秒调用一次 setNumber(count + 1)，但在这次渲染中 count 一直是 0，每1秒将 state 设置成 1。...一个 state 变量的值永远不会在一次渲染的内部发生变化，即使其事件处理函数的代码是异步的。它的值在 React 通过调用组件“获取 UI 的快照”时就被“固定”了。...总结：设置 state 不会更改现有渲染中的变量，但会请求一次新的渲染。 React 会在事件处理函数执行完成之后处理 state 更新。这被称为批处理。

330 0

JavaScript 入门（下）

在浏览器预览效果如下：分析：打开页面2秒后，浏览器会弹出欢迎语。由于setTimeout()方法只会执行一次，所以只会弹出一次对话框。...其中setTimeout()方法内的代码只会执行一次，而setInterval()方法内的代码会重复性执行，除非你使用clearInterval()方法来取消执行。...setInterval()方法会重复执行某一段代码或函数。如果这个例子使用setTimeout方法就不能实现了，因为setTimeout()方法只会执行一次，而setInterval()会重复执行。...； 2、setTimeout()方法内的代码只会执行一次，而setInterval()方法内的代码会重复性执行。...按下键事件（只包含数字键） onkeyup 放开键事件（包括数字键、功能键）三个事件的执行顺序如下：onkeydown -> onkeypress ->onkeyup。

1K2 0

小程序在父组件执行子组件方法，可适用于下拉刷新上拉加载之后执行子组件方法

当父组件引用了子组件的时候，会遇到父组件执行子组件的方法，比如下拉刷新上拉加载等事件只有在页面中才能检测到，但是获取数据的方法在子组件，这时就可以执行子组件方法。...思路很简单，类似于vue中给子组件加ref执行子组件方法道理一样，这里是给子组件加一个属性： id="子组件名称",比如：然后在父组件对应的方法中直接...this.selectComponent("#list").getList(); 如果涉及到多次调用该子组件的方法，可以在onReady生命周期中定义一下，比如： onReady:function(...){ this.list = this.selectComponent("#list"); }, 之后在方法中再调用的时候直接用this.list.方法名就可以了。

1K1 0

前端之BOM和DOM

1.2.5.5clearTimeout() 语法： clearTimeout(setTimeout_variable) 举个例子： // 在指定时间之后执行一次相应函数 var timer = setTimeout...语法： clearInterval(setinterval返回的ID值) 举个例子： // 每隔一段时间就执行一次相应函数 var timer = setInterval(function(){console.log...(123);}, 3000) // 取消setInterval设置 clearInterval(timer); //每个两秒执行一次func，八秒以后结束 function...setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。...setTimeout()只执行一次，而setInterval可以多次调用。二、DOM DOM(Document Object Model)文档对象模型是一套对文档内容进行抽象和概念化的方法。

2.7K3 0

超级玛丽HTML5源代码学习-----（三）

(function(){ //距上一次执行相隔的时间....canvas.width,canvas.height); //使用背景覆盖的方式清空之前绘制的图片 context.drawImage(ImgCache["bg"],0,0); //在新位置上绘制图片...setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。...由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。...timeCount()函数 //t是函数返回的id值 //setTimeout() 只执行 code 一次。

1.2K2 0

第46天：setInterval与setTimeout的区别

js的setTimeout方法用处比较多，通常用在页面刷新了、延迟执行了等等。今天对js的setTimeout方法做一个系统地总结。...1、setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。　　...millisec（必需）：在执行代码前需等待的毫秒数。　提示： setTimeout() 只执行 code 一次。...2、setInterval setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。...区别通过上面可以看出，setTimeout和setinterval的最主要区别是： setTimeout只运行一次，也就是说设定的时间到后就触发运行指定代码，运行完后即结束。

9521 0

JavaScript 计时事件

JavaScript 计时事件通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。...在 JavaScritp 中使用计时事件是很容易的，两个关键方法是: setInterval() - 间隔指定的毫秒数不停地执行指定的代码。...setTimeout() - 在指定的毫秒数后执行指定代码。注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。...实例每三秒弹出 "hello" ： setInterval(function(){alert("Hello")},3000); 实例展示了如何使用 setInterval() 方法，但是每三秒弹出一次对用户体验并不好...setInterval() 方法设置每秒钟执行一次代码，就是手表一样。

5354 0

原生JS实现可折叠导航栏

但在代码中，并不能真的用for循环来做，那样在移动过程中js就会一直卡在循环中而不能执行其他代码，所以这里可以使用setInterval函数来做，它会每隔一段时间调用一次某个方法，格式为setInterval...为了使移动更平滑，每次调用时只移动到目标位置之间的距离的10%.实现折叠的函数代码如下： /*关闭/打开导航*/ function closeNav(nav,body,navTargetWidth){...，这里事件分为，点击按钮，鼠标进入导航栏，鼠标移出导航栏三种。...minWidth_leftNav = 60; var maxWidth_leftNav = 280; CWLN = null; document.getElementById("close-left-nav").onclick...var maxWidth_leftNav = 280; CWLN = null; document.getElementById("close-left-nav").onclick

7.2K2 0

javascript中的setTimeout() 方法和clearInterval() 方法和setInterval() 方法

要调用的函数后要执行的 JavaScript 代码串。 millisec 必需。在执行代码前需等待的毫秒数。提示和注释提示：setTimeout() 只执行 code 一次。... 定义和用法 clearInterval() 方法可取消由 setInterval() 设置的 timeout。...clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。...setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。...由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

1.2K2 0

【JavaScript基础】Js的定时器（你想看的原理也在哟）

Js的定时器，是前端的基本工具，在日常的开发和工作上也会经常的使用到。前端的定时器有两种，一种是一次性定时器，一种是重复性定时器。...因此实际上，两次执行之间的间隔会小于指定的时间。比如，setInterval指定每100ms执行一次，每次执行需要5ms，那么第一次执行结束后95毫秒，第二次执行就会开始。...在看到这两种方法都是接收一个参数，这个参数就是定时器的标识，这个标识在使用定时器的时候被定义用来接收定时器方法的变量。...同步任务都是在主线程中执行，形成了一个执行栈，直到主线程空闲时，才会去事件队列中查看是否有可执行的异步任务，如果有就推入主进程中。...复制代码总结 JavaScript引擎是单线程，它会强制异步事件排队等待执行； setTimeout和setInterval执行原理是不一样的，需要注意他们的执行时间的影响；如果一个一次性定时器（

6273 0

Web前端基础（06）

parseInt()/parseFloat() 把字符串或数值转成整数/转成小数 var timer =setInterval(方法,时间间隔) 开启定时器 clearInterval(timer)...什么是事件: 系统给提供的一些特定时间点, 事件包括:鼠标事件,键盘事件,状态改变事件鼠标事件: onclick 鼠标点击事件 onmouseover 鼠标移入事件 onmouseout...//直接调用方法写括号,把方法作为参数传递时不写括号 var time1 = setInterval(myfn, 1000); function myfn() { console.log...console.log("第二种:"+i) if(i>10){ // 停止定时器 clearInterval(time2) } },2000); //只执行一次的定时器..." onclick="alert('事件触发!')"

2.7K2 0

JavaScript

传统方式删除事件 divs[0].onclick = null; } 方法监听注册解绑方式： // 2. removeEventListener 删除事件 divs[1...只弹出son提示框。...css 等就可以执行加载速度比 load更快一些 2.调整窗口大小事件定时器 1.setTimeout()定时器 // 1. setTimeout //...function() { console.log('继续输出'); }, 1000); // 2. setTimeout 延时时间到了，就去调用这个回调函数，只调用一次...就结束了这个定时器 // 3. setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数 JS执行队列异步： location

1.2K7 0

setTimeout和requestAnimationFrame

线程是 CPU 调度的最小单位（是建立在进程基础上的一次程序运行单位）。由于每个进程至少要做一件事,所以一个进程至少有一个线程。系统会给每个进程分配独立的内存,因此进程有它独立的资源。...setInterval：以指定周期调用函数，而setInterval则是每次都精确的隔一段时间推入一个事件（但是，事件的执行时间不一定就不准确，还有可能是这个事件还没执行完毕，下一个事件就来了）....如图所示，尽管在255ms处添加了定时器代码，但这时候还不能执行，因为onclick事件处理程序仍在运行。定时器代码最早能执行的时机是在300ms处，即onclick事件处理程序结束之后。...但是，这样会导致两个问题： 1、某些间隔被跳过； 2、多个定时器的代码执行之间的间隔可能比预期的小假设，某个onclick事件处理程序使用setInterval()设置了200ms间隔的定时器。...这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。

1.7K2 0

03 . 前端之JavaScipt

全局变量: 在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。变量生存周期: JavaScript变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。...,而不是在函数被调用后立即执行,我们称之为计时事件....计时方法: setInterval() 间隔指定的毫秒数不停地执行指定的代码 clearInterval()方法用于停止setInterval()方法执行的函数代码 setTimeout() 暂停指定毫秒数后执行指定的代码...setTimeout(function(){alert("xxx")},2000) // 在指定时间之后执行一次相应函数 var timer = setTimeout(function(){alert...# 语法： # clearInterval(setinterval返回的ID值) // 每隔一段时间就执行一次相应函数 var timer = setInterval(function(){console.log

1.3K4 0

JavaScript高级

假如send方法就是内置的，早已经写好的方法，我们执行web.send()，虽然产生数据，但是最为程序员的我们并没有写处理这个数据的方法，所以我们为recved编写了一个处理数据方法，再去执行web.send...再说，比如事件的绑定，我们为className为div的div标签绑定鼠标点击事件　　在我们没有给div的点击事件写相应的函数时，程序并没报错，一旦为其添上方法，我们在触发该事件的话，那么我们写的方法会作为回调函数去执行...循环一次，先是匿名函数自调用一次，产生一个局部空间存放函数体代码，这样循坏5次，就产生了五个不同局部空间的函数，当触发点击事件，就去执行相对应的回调函数，所引弹出的是它对应的索引值*/ //我们可以通过对象的属性去解决变量污染问题...//类方法　　　　static do（） {'do.....'} 　　} 　　四、定时器 //setInterval(持续性定时器) //setInterval(函数, 毫秒数,...函数所需参数(可以省略)); var timer = setInterval(function() {console.log("呵呵");}, 1000) //setTimeout(一次性定时器)

3202 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云