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

她的代码是这样写的：

 <!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. 笔记-迎难而上之Java基础进阶2

    Set集合 import java.util.*; public class HashSetDemo{ public static void main(String[] args){ //Set接口的 ...

  2. JAVAFX-2 开发应用

    理解javafx 架构 ● 场景图(Scene Graph) ● JavaFX功能的公开API(Java Public APIs for JavaFX Features) ● 图形系统(Graphic ...

  3. 集合之ArrayList,HashSet,HashMap

    结合框架的体系结构: 一.List(列表) 1. List的特点 (1)List是元素有序并且可以重复的集合,称为序列 (2)List可以精确的控制每个元素的插入位置,或删除某个位置的元素 (3)Li ...

  4. GPU程序缓存(GPU Program Caching)

    GPU程序缓存 翻译文章: GPU Program Caching 总览 / 为什么 因为有一个沙盒, 每一次加载页面, 我们都会转化, 编译和链接它的GPU着色器. 当然不是每一个页面都需要着色器, ...

  5. maven settings.xml windows

    <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Soft ...

  6. @Slf4j注解的使用

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

  7. openstack安装newton版本neutron服务部署（四）

    一.管理节点部署服务: 1.安装neutron: [root@linux-node1 ~]# yum install openstack-neutron openstack-neutron-ml2 o ...

  8. Spark Mllib里如何程序输出数据集的条数（图文详解）

    不多说,直接上干货! 具体,见 Hadoop+Spark大数据巨量分析与机器学习整合开发实战的第17章 决策树多元分类UCI Covertype数据集

  9. webpack.config.js====CSS相关：css和scss配置loader

    1. 安装: //loader加载器加载css和sass模块 cnpm install style-loader css-loader node-sass sass-loader --save-dev ...

  10. springboot集成shiro实现验证码校验

    github:https://github.com/peterowang/shiro/ 这里实现验证码校验的思路是自己添加一个Filter继承FormAuthenticationFilter,Form ...