js定时器出现第一次延迟的原因及解决方法

我们在使用js定时器，经常会出现间隔几秒获取一次数据，这是通过setInterval实现的。而且如果setInterval() 参数传递不当，定时器会延迟试行。本文向大家介绍js定时器第一次延迟的原理及实现过程。

setInterval()

作用是在播放动画的时，每隔一定时间就调用函数、方法或对象。

语法

setInterval(function(),time); 单位是毫秒

注意：单位是毫秒

定时器第一次延迟执行：采用setInterval实现

var t = setInterval(scrollTop,2500);
function scrollTop(){
 // ...
}

js setInterval第一次执行时存在延迟的解决方法

在使用setInterbal（function,delayTime）方法时，发现它会为函数的第一次调用也做延迟。一般我们都是第一次立即调用，然后延迟调用。我的解决方法如下：

需要延迟调用的函数：
  function callinSound(){
  	var callin=$('#callin')[0];
  	callin.load();
  	callin.play();
  	//第一次执行完成后返回这个函数
  	return callinSound;
  }
调用方：setInterval(callinSound(),6000);
首先，调用callinSound（）方法，然后延迟执行。

到此这篇关于js定时器出现第一次延迟的原因及解决方法的文章就介绍到这了,更多相关js定时器为什么会出现第一次延迟内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 利用JS定时器实现元素移动

    利用JS定时器实现元素移动

    利用JS定时器做一个元素做一个有移动效果的方法,实现思路:首先声明一个变量存放元素距离左侧的边距,然后我们在声明一个变量存放每次元素需要移动的距离,然后再给这个方法一个完成时间就可以了.需要注意的是获取到的值如果不是数值型的数据需要装换,否则不能进行判断.再判断一下该元素移动到某个位置之后,步长给它一个负值,该元素就会往回跑了. 大家还可以想一想元素移动到左右侧的时候如何实现转身效果. <!DOCTYPE html> <html> <head> <meta cha

  • 解决js中的setInterval清空定时器不管用问题

    使用场景:我在函数A中调用定时器函数,定时器是单独写的一个函数 原因:页面加载时我调用了1次函数A,然后又单独调用了一次定时器函数,导致调用了2次setInterval(),导致有setInterval_id有2个值. 通过打印定时器的值发现的问题. clearInterval()只关闭了其中一个setInterval_id,另一个setInterval_id还会启动setInterval(). 解决方法:把单独调用的定时器函数去掉. 补充知识:js vue中setTimeout无法通过clea

  • JavaScript定时器实现限时秒杀功能

    JavaScript定时器实现限时秒杀功能

    本文实例为大家分享了JavaScript实现限时秒杀功能的具体代码,供大家参考,具体内容如下 文件index.html 代码: <!DOCTYPE html> <html> <head> <meta charset="GBK" /> <title>show</title> <link rel="stylesheet" href="css/index.css" type=

  • JS定时器如何实现提交成功提示功能

    应用场景: 用户评论后,在合适位置弹出"评论成功",2秒钟后自动消失,提示用户评论成功. HTML: {#评论成功提示#} <div class="popup_con" style="display: none; margin-left: 300px"> <div class="popup" > <p style="color: red; font-size: 16px">

  • js实现鼠标切换图片（无定时器）

    本文实例为大家分享了js实现鼠标切换图片的具体代码,供大家参考,具体内容如下 实现效果,可以利用鼠标移动在对应的小点点上,或者点击左右两侧的箭头切换图片,并在图片的上方显示出图片的页数,下方显示出对应图片的标题. 全部代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

  • JavaScript定时器实现无缝滚动图片

    JavaScript定时器实现无缝滚动图片

    本文实例为大家分享了JavaScript实现无缝滚动图片的具体代码,供大家参考,具体内容如下 文本: setInterval 开启间隔型定时器 clearTimeout 关闭定时器 offsetWidth 获取宽度 offsetLeft 获取向左偏移量 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝移动<

  • js实现0ms延时定时器的几种方式

    目录 queueMicrotask async/await MessageChannel 最后 附录 这两天看到一篇介绍<如何实现准时的 setTimeout?>的文章,文章起源于一道面试题:有什么办法让setTimeout准时呀?具体文章内容可查看附录[1],看完之后,引起了我对setTimeout这个函数的探究兴趣,因此在MDN上重新查阅了相关文档,其中提到[最小延时 >=4ms]的一点,因此使用setTimeout不能实现0ms延时的定时器,如果要实现的话,提供了一个参考链接[2]

  • JavaScript 定时器详情

    目录 1.简单介绍 2.setInterval 2.1 描述 2.2 参数 2.3 返回值 2.4 用法 3.setTimeout 3.1 描述 3.2 参数 3.3 用法 4.取消timer 5.在控制台使用定时器 1.简单介绍 在JavaScript中定时器有两个 setInterval() 与 setTimeout() 分别还有取消定时器的方法. 这都是window的对象,调用时可以省略window.这两个方法并不在 JavaScript 的规范中. 定时器方法相关方法有四种: 方法 描述

  • js定时器出现第一次延迟的原因及解决方法

    我们在使用js定时器,经常会出现间隔几秒获取一次数据,这是通过setInterval实现的.而且如果setInterval() 参数传递不当,定时器会延迟试行.本文向大家介绍js定时器第一次延迟的原理及实现过程. setInterval() 作用是在播放动画的时,每隔一定时间就调用函数.方法或对象. 语法 setInterval(function(),time); 单位是毫秒 注意:单位是毫秒 定时器第一次延迟执行:采用setInterval实现 var t = setInterval(scro

  • js放到head中失效的原因与解决方法

    1.今天写js碰到一个奇怪的问题,写好的js放到body里面执行,但是放到head中没有任何效果,为什么导致这种原因呢? 看失效代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/

  • 关于JavaScript实现动画时动画抖动的原因与解决方法

    关于JavaScript实现动画时动画抖动的原因与解决方法

    目录 使用定时器实现动画出现卡顿的原因 requestAnimationFrame 的前世今生 requestAnimationFrame VS setInterval 参考资料 总结 前段时间在使用 JavaScript 做动画的时候发现做出来的动画会出现卡顿的现象,今天我们主要就来聊一下卡顿的原因以及如何解决这个问题. 使用定时器实现动画出现卡顿的原因 主要原因是浏览器无法确定定时器的回调函数的执行时机.以 setInterval 为例,当一个 setInterval 定时器被创建后,它的回

  • 关于动态生成dom绑定事件失效的原因及解决方法

    之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: 1. 事件失效的原因: (1)bind事件绑定只对dom中存在的元素有效,对于我们后来动态增加的元素是监测不到,所以绑定不了 (2)同样,当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是获取

  • AngularJS使用ng-inlude指令加载页面失败的原因与解决方法

    本文实例讲述了AngularJS使用ng-inlude指令加载页面失败的原因与解决方法.分享给大家供大家参考,具体如下: AngularJS中提供的ng-include指令,很类似于JSP中的<jsp:include>用来将多个子页面合并到同一个父页面中,避免父页面过大,可读性差,不好维护. 父页面parent.html代码如下: <html> <head> <script src="angular-1.2.2/angular.js">&

  • Java 内存溢出的原因和解决方法

    Java 内存溢出的原因和解决方法

    你是否遇到过Java应用程序卡顿或突然崩溃的情况?您可能遇到过Java内存泄漏.在本文中,我们将深入研究Java内存泄漏的确切原因,并推荐一些最好的工具来防止内存泄漏发生. 什么是JAVA内存泄漏? 简单地说,Java内存泄漏是指对象不再被应用程序使用,而是在工作内存中处于活动状态. 在Java和大多数其他编程语言中,垃圾收集器的任务是删除不再被应用程序引用的对象.如果不选中,这些对象将继续消耗系统内存,并最终导致崩溃.有时java内存泄漏崩溃不会输出错误,但通常错误会以java.lang.Ou

  • Pycharm cannot set up a python SDK问题的原因及解决方法

    Pycharm cannot set up a python SDK问题的原因及解决方法

    目录 一.问题原因 二.解决办法 总结 一.问题原因 (如果不是第一次使用pycharm,我觉得可以跳过这一章) 我是升级以后,在用pycharm打开以前的项目就出现报错了: 很明显是环境信息配置的不正确: 在修改环境配置的时候出现了下面的报错 进入Pycharm后,打开之前的项目,打开Pycharm→file→settings→project interpreter,按照下图1选择配置之后,点击[OK]会出现报错,如图2 我的环境上有很多之前的包,所以这个地方我选择使用之前的venv环境,不敢

  • el-form resetFields无效和validate无效的可能原因及解决方法

    el-form resetFields无效和validate无效的可能原因及解决方法

    目录 问题导入 简单实例 1.官方案例 2.个人案例 resetFields失效及解决办法 validate失效及解决办法 3.model is required for validate to work! 结尾 问题导入 在使用 el-form 过程中,尤其是表单验证这一块,官方提供的 reserFields 方法以及验证方面存在一些坑,在此记录一下,给大家提供可能的解决办法. 简单实例 1.官方案例 先来看看官方提供的案例,对应的官网 表单验证 对应的代码 <el-form :model=&qu

  • MySQL无法创建外键的原因及解决方法

    关联2张表时出现了无法创建外键的情况,从这个博客看到,问题出在第六点的Charset和Collate选项在表级和字段级上的一致性上.我的2张表的编码charset和collate不一致,2张表都执行执行SQL语句: alter table 表名 convert to character set utf8; 完美解决问题: ps:下面看下MySQL无法创建外键.查询外键的属性 MyISAM 和InnoDB 讲解 InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各

  • jQuery通过ajax方法获取json数据不执行success的原因及解决方法

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述3个标准写法: 1)键名称:用双引号括起: 2)字符串:用双引号括起: 3)数字,布尔值不需要使用双引号括起 : 注意:一定是双括号! 2.jQuery中ajax使用json数据类型总是跳过success执行error语句 执

随机推荐