晚上查阅了很多文章,都是避免点击事件多次执行。反过来要是让事件多次执行该如何做?

这里可以配个setTimeout();来执行

这里我们用layui

<link rel="stylesheet" href="./css/layui.css"/>
<script src="layui.js"></script>

<div style="width:100px;height:100px;background-color:red;" onclick="fn();">
</div>
<script>

function fn(){
var odiv = document.getElementsByTagName('div')[0];
odiv.className = 'layui-anim layui-anim-scale'; //给元素添加class
setTimeout(function(){odiv.className = '';},300); //还原,将元素class值删除(延迟执行,在动画效果执行后)
}
</script>

js执行多次事件,而非一次的更多相关文章

  1. JS执行事件

    先贴出几个名词: 同步任务: 在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务 异步任务:   不进入主线程,而进入"任务队列"的任务,只有任务队列通知主线程, ...

  2. JS执行机制--事件循环--笔记

    JS的解析是由浏览器中的JS解析引擎完成的.JS是单线程运行,也就是说,在同一个时间内只能做一件事,所有的任务都需要排队,前一个任务结束,后一个任务才能开始.但是又存在某些任务比较耗时,如IO读写等, ...

  3. js多次触发事件,在一定延迟内只执行一次 (事件累加)

    js多次触发事件,在一定延迟内只执行一次的案例: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  4. js立即执行函数应用--事件绑定

    js中立即执行函数的应用:应用到事件绑定上. 少说多做,直接运行代码(代码中有注释): <!DOCTYPE html> <html lang="zh"> & ...

  5. 4.Netty执行IO事件和非IO任务

    回顾NioEventLoop的run方法流程 IO事件与非IO任务 处理IO事件 处理非IO任务 聚合定时任务到普通任务队列 从普通队列中获取任务 计算任务执行的超时时间 安全执行 计算是否超时 总结 ...

  6. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  7. Node.js实战(九)之事件循环

    Node.js 是单进程单线程应用程序,但是因为 V8 引擎提供的异步执行回调接口,通过这些接口可以处理大量的并发,所以性能非常高. Node.js 几乎每一个 API 都是支持回调函数的. Node ...

  8. Node js 安装+回调函数+事件

    /* 从网站 https://nodejs.org/zh-cn/ 下载 这里用的 9.4.0 版本 下载完安装 安装目录是 D:\ApacheServer\node 一路默认安装 安装后打开cmd命令 ...

  9. js进阶 12 jquery事件汇总

    js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...

随机推荐

  1. 【一起学源码-微服务】Nexflix Eureka 源码二:EurekaServer启动之配置文件加载以及面向接口的配置项读取

    前言 上篇文章已经介绍了 为何要读netflix eureka源码了,这里就不再概述,下面开始正式源码解读的内容. 如若转载 请标明来源:一枝花算不算浪漫 代码总览 还记得上文中,我们通过web.xm ...

  2. http状态码301和302详解及区别——辛酸的探索之路

    原文链接:https://blog.csdn.net/grandPang/article/details/47448395 一直对http状态码301和302的理解比较模糊,在遇到实际的问题和翻阅各种 ...

  3. Linux Shell脚本,删除旧文件,保留最新的几个文件

    删除某一目录下文件,只保留最新的几个 #!/bin/bash #保留文件数 ReservedNum= FileDir=/home/dev/saas_test/testcases/report/html ...

  4. $\LaTeX$数学公式大全6

    $6\ Binary\ Operation/Relation\ Symbols$$\ast$ \ast$\star$ \star$\cdot$ \cdot$\circ$ \circ$\bullet$ ...

  5. Vue2实践computed监听Vuex中state对象中的对象属性时发生的一些有趣经历

    今天想实现一个功能,在全局中随时改变用户的部分信息.这时候就想到了用Vuex状态控制器来存储用户信息,在页面中使用computed来监听用户这个对象.看似一个很简单的逻辑,就体现了我基本功的不扎实呀. ...

  6. vue-cli脚手架构建了项目,想去除Eslint验证,如何设置?

    vue-cli脚手架构建了项目,想去除Eslint验证,如何设置? 在webpack.base.conf.js里面删掉下面: preLoaders: [ { test: /\.vue$/, loade ...

  7. SRS之监听端口的管理:RTMP

    1. 监听端口管理的入口函数 监听端口的管理入口在 run_master 函数中,如下: int run_master() { ... if ((ret = _srs_server->liste ...

  8. ping包的checksum校验和

    PING包发送里面有一个比较关键的就是checksum即校验和 checksum本来就是ICMP包内的数据 怎么又从ICMP包开始计算?后来看了一下文档,就是就算ICMP的时候checksum本身 的 ...

  9. iframe 跨域传参

    parent-index.html: (本地起服务,放在5000端口上) <div class="content"> <iframe src="http ...

  10. ReentrantLock源码探究1:非公平锁的获取和释放

    1.AQS简单介绍 ​ Sync是ReentrantLock的一个内部类,它继承了AbstractQueuedSynchronizer,即AQS,在CountDownLatch.FutureTask. ...