【项目】TS--setInterval方法实现抽奖

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m18633778874/article/details/85261208

前言

    小编最近遇到一个项目上面的新需求，需要对报名参加活动的人员进行抽奖活动，基本上就是利用两个button按钮实现，幸运观众的抽取，具体使用了setInterval方法实现滚动效果。

人名滚动效果

    一、setInterval 定时执行方法

    //开始按钮 开始计时器
    this.mySetInterval = setInterval(() => {

        this.name = this.names[this.indexWho];
        this.indexWho++;
        if (this.indexWho > this.names.length - 1) {
          this.indexWho = 0;
        }
      }, 100);

   //结束按钮
      clearInterval(this.mySetInterval);  //清除计时器

   二、数组存放人名  

 //查询参加活动的人员  
queryUserName() {
    let dataUserIds = 'game-web/pooIntegral/queryPersons/' + this.poolId;  

    this.http.get(dataUserIds).subscribe(
      res => {
        this.userIds = res.json().data;
        setTimeout(() => {
          for (let index = 0; index < this.userIds.length; index++) {
            this.userId = this.userIds[index];
            let dataUserNames = 'game-web/user/queryUserById/' + this.userId;           

            this.http.get(dataUserNames).subscribe(
              res => {
                if (res.json().data != null && res.json().data != undefined) {
                  this.names[index] = res.json().data; //将查询到的人名存放到数组
                }
              });
          }         
   }

效果图

   简易效果图如下所示：

                                                                             

小结

    这个小功能，其实只要用对了方法就很好实现，一开始自己打算使用js自带的滚动效果方法去实现，发现比较难以实现，最终转换思路，考虑使用定时器setInterval的方式实现。

                                                                             感谢您的访问！