今天在群里看见一个人在问"点击按钮使图片产生旋转为什么要使用计时器来实现"，我自己操作了一遍她的代码才发现里面的逻辑实现很有意思，所以写出来分享一下。

她的代码是这样写的：

 <!DOCTYPE html>

 <html>

     <head>

         <title>Page Title</title>

         <style>

             #myImg {

                 width: 60%;

             }

             .myShow {

                 animation: rotate 1s;

             }

             @keyframes rotate {

                 ftom {transform: rotate(0deg);}

                 to {transform: rotate(180deg);}

             }

         </style>

     </head>

     <body>

         <div>

             <img

                 id='myImg'

                 src='http://www.8090.com/uploads/allimg/141204/3-141204134GJ95.jpg'

             />

             <p id='demo'></p>

             <button onclick='myBtn()'>click</button>

         </div>

         <script>

             function myBtn() {

                 var rotate = document.getElementById('myImg');

                 var myAttr = function(){

                     rotate.setAttribute('class','myShow');

                 }

                 setTimeout(myAttr,30);

                 rotate.setAttribute('class','');

             }

         </script>

     </body>

 </html>

在这里，通过点击按钮触发myBtn函数，先执行计时器setTimeout, 调用myAttr函数添加了class属性'myShow'，再移除了这个class属性。和‘myShow'绑定了rotate这个CSS动画，从而实现图片旋转。

回到她的问题："为什么要使用计时器来实现图片旋转？"

按照她的想法，不使用计时器，只要再次点击按钮，不一样会产生click事件么，那计时器有什么用？

下面去掉计时器，直接使用setAttribute属性看看是否可以达到同样效果。js代码如下：

 <script>

     function myBtn() {

         var rotate = document.getElementById('myImg');

       //  var myAttr = function(){

       //      rotate.setAttribute('class','myShow');

       //      console.log('hello')

       //  }

         rotate.setAttribute('class','myShow');

       //  setTimeout(myAttr,30);

         rotate.setAttribute('class','');

     }

 </script>

然而，点击按钮没有产生任何反应。原因是因为js的运行逻辑是至上而下的顺序，当我们点击按钮后，myBtn函数从上而下执行，执行完后class属性已被删除，就不会对HTML产生DOM效果。

那同样在前面的代码里，js函数的最后一行也是rotate.setAttribute('class','')，为什么可以正常产生DOM效果？

通过加入console.log后，我发现计时器的原理是它改变了函数的运行顺序。

通过添加计时器，函数的执行顺序变成了：’执行setTimeout方法' => ‘删除class属性' => (30毫秒后)'添加class属性'。因为函数的运行结果是添加class属性，所以保留了class='myShow'，从而引用了CSS动画效果。

 <script>

     function myBtn() {

         var rotate = document.getElementById('myImg');

         var myAttr = function(){

             rotate.setAttribute('class','myShow'); //设置class属性值为myShow

             console.log(document.getElementById('myImg').className)

         }

         setTimeout(myAttr,30);

         rotate.setAttribute('class','None'); //设置class属性值为None

         console.log(document.getElementById('myImg').className)

     }

 </script>

执行页面后，发现console.log打印结果先是'None',再是'myShow'，说明了每次点击按钮都是先"删除"class属性，在添加class属性。这样每次className都是被保留了下来，而再次点击按钮，则又先删掉了class属性，以此类推。

20181111 计时器影响DOM点击事件的逻辑的更多相关文章

  1. 动态生成的DOM做点击事件无效

    有时候我们的标签都是从后台获取的数据,然后利用JS添加到页面上,当我们写生成的标签的点击事件(click)时没有效果. 例如: <section> 测试动态生成的DOM点击事件 <b ...

  2. 为dom添加点击事件，由此引发this指向的思考

    下午没有任务,闲来无事仿个小网页巩固下基础知识.由于公司安全规定,原网页截图不便上传(也没法上传),回家后做了个简单的菜单以图示: 目标:点击某选项时,该选项底边加粗 1.首先定义click方法,然后 ...

  3. position布局影响点击事件以及冒泡获取事件目标

    在编写功能时总是会出现很多意想不到的问题,现在就讲讲我遇到的两个问题,通过举一个相似的例子来解说. <1> 元素互相独立,不存在包含于被包含 选择城市的按钮,为它绑定点击事件,点击后就弹出 ...

  4. javascript总结35:DOM之给a注册点击事件, 阻止a标签的默认行为

    给a注册点击事件时,有默认行为,阻止默认行为的方式: retrun false <!DOCTYPE html> <html lang="zh-CN"> &l ...

  5. React 的 DOM 添加多个点击事件

    第一直觉代码如下:后果是写在后面的事件函数覆盖前面的事件函数,只执行第二条(弹出 222). import React, { Component, Fragment } from 'react' ex ...

  6. [前端][自定义DOM事件]不使用setTimeout实现双击事件或n击事件

    使用setTimeout实现双击事件 例如,这样: let div = document.getElementById("div"); doubleClick(div, funct ...

  7. fastclick.js解决移动端（ipad）点击事件反应慢问题

    参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 ...

  8. angularJs 多文件动态上传（删除其中一个文件的时候，要么file没被删除，要么删除了之后，点击事件失效）

    <div cacModule.controller('CacScriptEditCtrl', CacScriptEditCtrl); CacScriptEditCtrl.$inject = [' ...

  9. tips 前端 点击事件

    新手总是时不时会纠结一下 点击事件 我们都知道这些小东西不难 但是偶尔难道不会想想我们可能对这些即使小kiss的问题的认知其实不够清晰 一个认识不清晰的东西使用时 总会有油然而生的不安感 从而用的不放 ...

随机推荐

  1. 剑指Offer的学习笔记（C#篇）-- 反转链表

    题目描述 输入一个链表,反转链表后,输出新链表的表头. 一 . 概念普及 关于线性表等相关概念请点击这里. 二 . 实现方法 目前,可以有两种方法实现该要求. 方法一:借助外部空间实现.这里可以将单链 ...

  2. 【ZJOI2007】捉迷藏 小小的总结

    2019-01-09 22:56:33 终于终于把这道题目做掉了... 做了两个晚上..不知道为什么自己如此之笨.. 在洛谷上断断续续一共交了24次,感觉自己都要被封号了. 昨天花半个晚上从零开始研究 ...

  3. jsp学习与提高（一）——JSP生命周期、三大指令及动作

    1.jsp定义: 1.1以java语言为脚本语言,运行在服务端的程序: 1.2处理客户请求,生成页面 1.3其本质是个sevlet会生成.java文件编译后再生成.class文件 2.jsp生命周期( ...

  4. Java中的"\t"

    \t相当于表格制表符tab键,一个格内放8的整数倍的字符,根据显示的字符串长度,剩下的显示空格数.比如:字符串长度为1,那么距离下一个串的空格数应该是8-1=7:如果字符串长度为2,那么距离下一个串的 ...

  5. ES6入门教程---解构赋值和字符串扩展

    解构赋值: ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 数组的解构赋值: 按照对应的顺序解构. var arr = [1,[2,3]]; ...

  6. python进阶01 面向对象、类、实例、属性封装、实例方法

    python进阶01 面向对象.类.实例.属性封装.实例方法 一.面向对象 1.什么是对象 #一切皆对象,可以简单地将“对象”理解为“某个东西” #“对象”之所以称之为对象,是因为它具有属于它自己的“ ...

  7. @Slf4j注解的使用

    项目中使用Slf4j日志: private static final Logger log=LoggerFactory.getLogger(TestMain.class); 使用@Slf4j以后,默认 ...

  8. D. Edges in MST 图论

    http://codeforces.com/contest/160/problem/D base on 克鲁斯卡尔, 首先每次都是对权值相同的边进行统一处理,假如加入了当前这条边出现了回路,那就能确定 ...

  9. JAVA 框架之面向对象设计原则

     面向对象设计原则:  单一职责原则 SRP :   一个类或者行为只做一件事 .  降低代码冗余,提高可重用性,可维护性,可扩展性,可读性 使用组合形式   里氏替换原则 LSP :  所有引用基类 ...

  10. Windows Azure 配置Active Directory 主机（2）

    前一篇概况给大家介绍了,在云端部署一台DC 需要满足一些条件,接下来进入正题,云端VM安装域控制器具体步骤. 步骤1 :验证 主DC 的静态 IP 地址 1.登录到 Corp 网络上的 主DC. 2. ...