JS的定时器setInterval

setInterval(() =>{
var start=vv.msg.substring(0,1)

var end =vv.msg.substring(1)

                   console.log(vv.msg)
                   console.log(end)
                   vv.msg=end+start
                   },400)

也相当于

setInterval(function(){
var start=this.msg.substring(0,1)

var end =vv.msg.substring(1)

                   console.log(vv.msg)
                   console.log(end)
                   vv.msg=end+start
                   },400)

注意：下面那个如果要用this要注意this的嵌套，

       var vv =new Vue({
           el:'.paoma',
           data:{
               msg:'跑马灯啊浪浪浪-----',

           },
           methods:{
               go(){

// setInterval(function(){
// var start=vv.msg.substring(0,1)

// var end =vv.msg.substring(1)

                   // console.log(vv.msg)
                   // console.log(end)
                   // vv.msg=end+start

// },400)
//

//_this=this

// setInterval(function(){
// var start=vv.msg.substring(0,1)

// var end =_this.msg.substring(1)

                   // console.log(vv.msg)
                   // console.log(end)
                   // _this.msg=end+start

// },400)

setInterval(() =>{
var start=this.msg.substring(0,1)

var end =this.msg.substring(1)

                   console.log(this.msg)
                   console.log(end)
this.msg=end+start
                   },400)
               },
           }
       });

       // document.getElementsByTagName('')
       // document.getElementById()
   </script>

完整的关闭打开

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script src="./lib/vue-2.4.0.js"></script>
   <style>
       [v-cloak] {
           display: none;
       }
   </style>
</head>
<body>
   <div id="app">
       <p>{{msg}}</p>
       <p v-cloak>{{msg2}}</p>
   </div>

   <div class="paoma">
       <input type="button" value="浪起来" :title="msg" v-on:click="go">
       <input type="button" value="停" @click="stop">
       <p v-cloak>{{ msg }}</p>
   </div>
   <script>
       var vm = new Vue({
           el:'#app',
           data:{
               msg:'欢迎学习Vue',
               msg2:'佳佳'
           }
       });

       var vv =new Vue({
           el:'.paoma',
           data:{
               msg:'跑马灯啊浪浪浪-----',
               interval:null,

           },
           methods:{
               go(){

// setInterval(function(){
// var start=vv.msg.substring(0,1)

// var end =vv.msg.substring(1)

                   // console.log(vv.msg)
                   // console.log(end)
                   // vv.msg=end+start

                   // },400)
                   //
                   //
                   if(this.interval !==null)
                   {
                       return;
                   }
                   this.interval=setInterval(() =>{
                   var start=vv.msg.substring(0,1)

var end =vv.msg.substring(1)

                   console.log(vv.msg)
                   console.log(end)
                   vv.msg=end+start
                   },400)
               },

               stop(){
                   clearInterval(this.interval)
this.interval = null;
               }
           }
       });

       // document.getElementsByTagName('')
       // document.getElementById()
   </script>
</body>
</html>

JS的定时器setInterval

猜你喜欢