最近项目上有个需求,当复制功能成功后,要求弹出提示信息。定的策略是 5秒轮询一次 是否有复制任务,如果有则根据返回的状态为true去请求消息接口,多条 的时候,要求 一秒弹出一条**提示信息,并且无论是否有消息都会再去请求是否有赋值任务接口。

其中就用到了setTimeout和setInterval,一开始觉得还挺更简单的,但是开发完测试的时候发现可能会存在本来应该5秒一次发送请求,变得越来越快,后来甚至一秒一次的情况。

附上代码:

      getCopyTaskMessages(val) {
            getTasksMessages({
                itemsPerPage: 100,
                page: 1,
                type: '',
                status: 'WAITING_NOTIFIED'
            }).then(res => {
                if (res.data.status) {
                    const arr = res.data.items;
                    let list = [];
                    if (arr.length <= 3) {
                        arr.forEach(item => {
                            list.push({
                                title: `${item.type === 'COPY_COURSE_DESIGN' ? '课程' : '课堂'}设计${item.jumpType === 'CD' && item.type === 'COPY_CLAZZ_DESIGN' ? '批量' : ''}复制${item.taskStatus === 'DONE' ? '成功' : '失败'}`,
                                text: item.title,
                                type: item.taskStatus === 'DONE' ? 'success' : 'error',
                                data: {
                                    type: 0,
                                    jumpPath: {
                                        name: item.jumpType === 'ZD' && item.type === 'COPY_CLAZZ_DESIGN' ? 'ClazzDesignDetailEdit' : 'CourseDesignDetailEdit',\
                                        params: { 
                                            oid: item.jumpOid\
                                        query: {
                                            title: item.title,
                                            tab: item.jumpType === 'CD' && item.type === 'COPY_CLAZZ_DESIGN' ?  3 : 0
                                    jumpOid: item.jumpOid,
                                    btnText: item.taskStatus === 'DONE' ? "查看" : '',
                                    borderColorClass: item.taskStatus === 'DONE' ? "border-green" : 'border-red',
                    } else {
                        list.push({
                            title: `你发起的${arr.length}个复制任务已完成`,
                            text: '任务中心',
                            type: 'success',
                            data: {
                                type: 1,
                                btnText: '',
                                borderColorClass: "border-green",
                    let i = 0;
                    this.$notify(list[i]);
                    this.notifyTimer = setInterval(() => {
                        i++;
                        this.$notify(list[i]);
                        if (i >= list.length) {
                            clearInterval(this.notifyTimer);
                    }, 1000);
                    this.checkTask();
        checkTask() {
            getTasksNotify().then(res => {
                if (res.data.status) {
                    this.timer = setTimeout(() => {
                        this.getCopyTaskMessages();
                    }, 5000);
                } else {
                    clearTimeout(this.timer);
                    this.timer = null;
                    clearInterval(this.notifyTimer);
                    this.notifyTimer = null;

后来有在网上查一下,发现可能是因为计时器调用后没有清理,导致下一次又创建了一个计时器,重复几次就会有多个相同的计时器已经被创建,就会产生越来越快的情况。 最后尝试每次请求是否有复制任务接口之前清空计时器,就ok了!

checkTask() {
    etTasksNotify().then(res => {
        if(this.timer) clearTimeout(this.timer;
        if (res.data.status) {
            this.timer = setTimeout(() => {
                this.getCopyTaskMessages();
            }, 5000);
        clearInterval(this.notifyTimer);
            this.notifyTimer = null;
复制代码
  • ChatGPT保姆级教程,一分钟学会使用ChatGPT!
  • 私信