setTimeout() 和 clearTimeout()的用法

5,272 阅读2分钟

背景

在做一个h5项目的时候,有这样一个需求:
点击确定按钮的时候,如果用户没有勾选协议,就给协议添加一个抖动的动画,用来引起用户的注意,提示用户这里是需要勾选的。但是在实现这个效果的时候发现,点击了确定按钮抖动了一次以后,我们没有勾选协议,直接再去点击确定按钮就会没有了抖动的效果。思来想去发现,添加动画的那个类名在加了第一次之后一直就在了,所以后面再点击就没有抖动效果了。于是乎,想到了setTimeout() 和 clearTimeout()


首先我们先看一下setTimeout()、clearTimeout()的定义和用法:

setTimeout()定义和用法

定义:

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

语法:
setTimeout(code,millisec)
参数 描述
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。

clearTimeout()定义和用法

定义:

clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

语法:
clearTimeout(id_of_settimeout)
参数 描述
id_of_settimeout 由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

然后我们来看一下项目的解决方法:

以下是代码实现的效果

啦啦


以下是实现代码

  • html代码:
<div class="pact" >
    <span :class="[check?'pact__check-on pact__check': 'pact__check']" @click="checkAction()"></span>
    <span class="pact__text">你已阅读并同意</span>
    <a :class="[make_shake?'pact__text-color shaking_animation':'pact__text-color']" href="#">《测试协议》</a> 
</div>
  • css代码:
.shaking_animation{
    animation-duration: 300ms;
    animation-iteration-count: 2;
    animation-name: move;
}
@keyframes move {
    from {
        transform: translateX(0px);
    }
    25% {
        transform: translateX(-16px);
    }
    50% {
        transform: translateX(0px);
    }
    75% {
        transform: translateX(16px);
    }
    to {
        transform: translateX(0px);
    }
}
  • js代码:
authClick: function(){
    var self = this;
    if(this.check){
        self.make_shake = false;
    }
    else{
        self.make_shake = true
        let timeout = setTimeout(()=>{
            self.make_shake = false;
            clearTimeout(timeout)
        },300)
    }
}

这里实现的方法是:设置一个定时器,过了300毫秒后,把make_shake重新设置为false,已达到300毫秒之后我们去掉动画shaking_animation类名。然后清空这个定时器。

结束语:

写的不好多多见谅。END!!!!!!