相关文章推荐

js中定时器有两种,setInterval是循环执行,setTimeout是定时执行,执行一次

一、循环执行(setInterval)

设置一个时间间隔,每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉
用法是setInterval(方法名或方法,延时), 第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔

<template>
  <section>
    <h1>hello world~</h1>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        timer: '',
        value: 0
    methods: {
      get() {
        this.value ++;
        console.log(this.value);
    mounted() {
      this.timer = setInterval(this.get, 1000);
    beforeDestroy() {
      clearInterval(this.timer);
</script>

上面的例子就是页面初始化的时候创建了一个定时器 setInterval ,时间间隔为1秒,每一秒都会调用一次函数get,从而使value的值加一。

二、定时执行 (setTimeout)

定时执行setTimeout是设置一个时间,等待时间到达的时候只执行一次,但是执行完以后定时器还在,只是没有运行

用法是setTimeout(方法名或方法, 延时); 第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔

<template>
  <section>
    <h1>hello world~</h1>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        timer: '',
        value: 0
    methods: {
      get() {
        this.value ++;
        console.log(this.value);
    mounted() {
      this.timer = setTimeout(this.get, 1000);
    beforeDestroy() {
      clearTimeout(this.timer);
</script>

上面是页面初始化时候创建一个定时器setTimeout,只在1秒后执行一次方法。

定时器需要在页面销毁的时候清除掉,不然会一直存在!!!

js中定时器有两种,setInterval是循环执行,setTimeout是定时执行,执行一次一、循环执行(setInterval)设置一个时间间隔,每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉用法是setInterval(方法名或方法,延时), 第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔&lt;template&gt; &lt;section&gt; &lt;h1&gt;hello world~&lt;/h1&gt; &.
项目 我们经常需要实现轮询-每隔几秒请求一次接口刷新数据 一般都会 使用 setInterval ,但要注意单纯 使用 它会导致页面卡死,关于怎么解决这个问题感谢年树先生的分享,在此做个记录方便以后查阅 原博地址如下:https://www.qdfuns.com/article/51117/15a67319ddea5b043a466583d7e734c6.html 解决方法如下: window.s...
使用 setInterval (function,delayTime)方法时,发现它会为函数的第一次调用也做延迟。一般我们都是第一次立即调用,然后延迟调用。我的解决方法如下: 需要延迟调用的函数: function calli... 自己在项目 使用 setInterval ,由于不正确的 使用 ,竟然导致了浏览器崩溃,项目停止,电脑死机…可怕之极,下面详细写一下关于 定时器 的用法及注意事项 mouted() { this.timer = setInterval (()=>{ // 要执行的函数 destoryed() { this.clearInterv...
vue ,有两套 定时器 ,一套是浏览器API,window对象上的;另一套就是 vue /nodejs封装的,需要引入 import { setInterval , clearInterval } from 'timers' 建议 使用 window对象自带的,因为不容易错。 如果一不小心只引入一个,就怎么也清不掉了。 import { setInterval } from 'timers' // 错误
Vue ,可以在生命周期钩子函数 使用 setTimeout setInterval 来执行异步操作或定时任务。 例如,在created生命周期钩子函数 使用 setTimeout 实现延迟执行: created() { setTimeout (() => { console.log('延迟执行'); }, 1000); 在mounted生命周期钩子函数 使用 setInterval 实现定时任务: mounted() { this.intervalId = setInterval (() => { console.log('定时任务'); }, 1000); beforeDestroy() { clearInterval(this.intervalId); 需要注意的是, 使用 setInterval 时需要在组件销毁前清除 定时器 ,否则可能会导致内存泄漏或其他问题。可以在beforeDestroy生命周期钩子函数 清除 定时器
 
推荐文章