`

对setInterval作简单封装

    博客分类:
  • js
阅读更多
/**
 *  调用方式
 * let i = new Interval(1000)
 * i.do(()=>console.log(new Date()))
 * i.stop()
 */
export default class Interval {
  constructor(duration) {
    this.id = -1
    this.duration = duration
  }

  do(fn) {
    if (this.id > 0) {
      throw Error('just do one thing')
    } else {
      this.id = setInterval(fn, this.duration)
    }
  }
  stop() {
    clearInterval(this.id)
    setTimeout(() => { this.id = -1 }, 100)
  }
}

分享到:
评论

相关推荐

    简单封装的轮播图插件,包含自动无限循环播放,标记点显示与隐藏,设置间隔时长,配置简单,支持移动端

    本文将详细介绍一个基于原生JavaScript封装的简单轮播图插件,它具备自动无限循环播放、标记点显示与隐藏以及设置间隔时长等功能,同时优化了移动端的兼容性和用户体验。 首先,我们来理解“封装”的概念。在编程中...

    安卓高德地图实时定位方法的封装

    本篇文章将深入探讨如何使用高德地图SDK来实现一个简单的实时定位功能,并进行方法封装,使得代码更加模块化,易于理解和复用。 首先,你需要在项目中引入高德地图的SDK。在`build.gradle`文件中添加对应的依赖,...

    自己封装的jquery插件@实现了简单的轮播图

    本文将深入探讨如何使用jQuery封装一个简单的轮播图插件,结合描述和标签,我们将涵盖以下知识点: 1. **jQuery基础**: jQuery的核心功能包括选择器、DOM操作、事件处理和动画效果。在封装轮播图插件时,我们首先...

    简单动画 web开发,动画函数的封装使用.zip

    "简单动画 web开发,动画函数的封装使用"这个主题涵盖了如何在网页中创建动画以及如何有效地管理这些动画的实现方式。下面,我们将深入探讨这一领域的核心知识点。 一、CSS动画 1. CSS3 Transform:变换属性允许...

    第34章 项目1-博客前端:封装库--动画初探[上]1

    在本节课程“第34章 项目1-博客前端:封装库--动画初探[上]1”中,我们将探讨JavaScript在创建动画效果中的应用,以及如何通过封装函数来简化动画的实现。主讲教师李炎恢将引导我们理解动画的工作原理,并提供实用的...

    MSClass Class Of Marquee Scroll通用不间断滚动JS封装

    在这个Marquee Scroll实现中,"封装"意味着将滚动逻辑打包在一个独立的函数或类中,使得其他部分的代码可以简单地调用这个功能,而无需关心具体实现细节。 四、不间断滚动原理 这种滚动效果通常通过改变元素的CSS...

    Vue中消息横向滚动时setInterval清不掉的问题及解决方法

    在实际的Vue项目中,你需要将这个逻辑封装成Vue组件,并使用Vue的生命周期钩子和事件总线来实现组件间的通信。确保在组件销毁时清除定时器,防止内存泄漏。此外,可以考虑使用Vue的`v-for`指令来渲染消息列表,结合...

    JS简单动画封装浅析

    JS简单动画封装是基于JavaScript语言实现的,它涉及到了网页开发中的一个核心概念——DOM操作,即通过编程方式对文档对象模型(Document Object Model)进行动态的操作和改变,从而实现动画效果。本文所讨论的简单动画...

    JS轮播图中缓动函数的封装

    这些库内部封装了复杂的插值计算和优化的动画执行逻辑,让开发者可以更简单地创建出流畅的动画效果。 此外,值得注意的是,为了保证动画的平滑性,开发者在实现时还需要考虑浏览器的兼容性和性能问题,例如,现代...

    js常见的几种封装方法,方便调用

    它使用`setInterval`定时更新元素的样式,每次改变一小步直到达到目标值`target`。速度计算根据当前值与目标值的差值,并进行向上或向下取整处理。 8. **随机数的封装**: `random(a, b)`函数返回`a`和`b`之间的一...

    Node.js-每天大红包·最新饿了么红包接口Node.js封装

    3. **接口封装**:理解接口文档,将复杂的API调用封装成简单的函数,可能涉及URL构造、请求参数设置、错误处理等。 4. **JSON解析与处理**:从API返回的JSON数据中提取所需信息,可能涉及到JSON.parse()和对象遍历...

    react-native-custom-component:简单封装的一些component

    react-native-custom-component简单封装的一些component,还有很多可以改进的地方。如何使用import BaseScrollView from './Components/BaseScrollView'import BaseFlatList from './Components/BaseFlatList'//上拉...

    js照片轮播和jquery封装的照片播放器

    总结,JavaScript 和 jQuery 的结合使得创建照片轮播变得简单而高效,通过理解基本的 DOM 操作、事件处理和动画方法,开发者可以构建出各种富有创意的轮播效果。结合具体的项目需求,如"一行多图轮播 含有弹出框",...

    javascript原生封装一个淡入淡出效果的函数测试实例代码

    所以,我简单的研究了一下纯js代码写淡入淡出的效果。 如果出现错误,请在评论中指出,我也好自己纠正自己的错误   (一)FadeIn淡入函数 淡入淡出的效果,其实就是一个setInterval(),加上循环的DOM操作,通过改变...

    一个已封装好的漂亮进度条

    this.timer = window.setInterval(ProcessBar.nowObj.moving, this.moveInterval); // 开始定时器 } else { window.clearInterval(this.timer); // 清除定时器 } } ``` 通过`changeMode`方法,可以切换进度条的...

    原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】

    在JavaScript中,动画效果通常是通过...这些例子展示了如何通过简单的函数设计,实现对不同运动模式的抽象,从而在网页中创造出丰富的视觉体验。在实际开发中,这些函数可以作为基础模块,根据项目需求进行扩展和定制。

    原生js封装运动框架的示例讲解

    通过这个示例,我们不仅能够了解到如何实现一个简单的动画效果,而且能够对JavaScript的定时器、事件处理、属性兼容性以及函数封装等知识点有更深入的认识。这个示例对于初学者来说是一个很好的学习资源,而对于有...

    最简单的闹钟 js代码源码

    在JavaScript(JS)中创建一个简单的闹钟是一个基础但实用的练习,可以帮助初学者更好地...7. 简单的类(对象)设计和封装概念。 通过这个项目,开发者可以巩固JS基础知识,同时学习如何在实际场景中运用这些知识。

    react native中的聊天气泡及timer封装成的发送验证码倒计时

    下面是一个简单的 timer封装的示例代码: ```jsx export default class Timer extends Component { componentWillMount() { const {interval} = this.props; this.timer = setInterval(this.onEvent, interval);...

    jQuery制作的图片切换特效

    jQuery作为一个强大的JavaScript库,简化了DOM操作,动画效果的创建以及事件处理,使得实现这种特效变得简单易行。 1. **jQuery基础**: jQuery的核心理念是"Write Less, Do More",它通过封装JavaScript的常用...

Global site tag (gtag.js) - Google Analytics