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

她的代码是这样写的：

 <!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. ORM应用

    目录 ORM概念 ORM由来 ORM的优势 ORM的劣势 ORM总结 ORM 与 DB 的对应关系图 Model 模块 ORM操作 增删改查操作 ORM概念 对象关系映射(Object Relatio ...

  2. java实现对字符串和数字的冒泡排序

    public static void sort(Object[] objects){ if(objects instanceof Number[]){ for (int i = 0; i < o ...

  3. C 语言实例 - 求两数的最大公约数

    C 语言实例 - 求两数的最大公约数 用户输入两个数,求这两个数的最大公约数. 实例 - 使用 for 和 if #include <stdio.h> int main() { int n ...

  4. day4列表作业详解

    1.day4题目 day4作业 1,写代码,有如下列表,按照要求实现每一个功能 li = ["alex", "WuSir", "ritian" ...

  5. C/C++<算法>进制转换超详细

    16转10 用竖式计算: 16进制数的第0位的权值为16的0次方,第1位的权值为16的1次方,第2位的权值为16的2次方 第0位: 5 * 16^0 = 5 第1位: F * 16^1 = 240 第 ...

  6. (转) RHEL7 忘记密码修改root密码

    博客链接:http://blog.csdn.net/derkampf/article/details/54346516 RHEL7进入单用户方式和重置密码方式发生了较大变化,GRUB由b引导变成了ct ...

  7. 9、数值的整数次方------------>剑指offer系列

    数值的整数次方 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 思路 这道题逻辑上很简单,但很容易出错 关键是要考虑全面,考虑到所有情况 ...

  8. 【Unity3D】资源对象、预设、查找对象、组合模式等知识点

    1.解释对象与资源区别于联系,根据官方案例,分别总结资源和对象组织的规则/规律.    下载并查看了Adam和Survival Shooter tutorial两个官方资源案例,这些案例作为资源,可以 ...

  9. C++ 中函数后面跟const是什么意思

    问题:c++:void display( ) const 中的const是什么意思?简答:意思是除了表明了mutable的成员变量以外该类的其他的成员变量在这个函数内一律不能修改. 详细:加const ...

  10. Android 使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突

    如果你还在为处理滑动冲突而发愁,那么你需要静下心来看看这边文章,如果你能彻底理解这篇文章中使用的技术,那么,一切滑动冲突的问题解决起来就轻而易举了: 先扔一个最终实现的效果图 先分析下效果图中实现的功 ...