js事件中有alert执行顺序的问题

发布于
2016-09-21

1、javascript中事件中如果有alert,为什么是等所有的alert都执行完了，再改变DIV的颜色，而不是弹一个框改变一个颜色？
CSS如下：

    <style>
        #div1{
            width:300px;
            height:300px;
            border:1px solid black;
        }
        #div2{
            margin:50px auto;
            width:200px;
            height:200px;
            border:1px solid black;
        }
        #div3{
            margin:50px auto;
            width:100px;
            height:100px;
            border:1px solid black;
        }
    </style>

HTML如下：

    <div id="div1">
        <div id="div2">
            <div id="div3">

            </div>
        </div>
    </div>

JAVASCRIPT如下：

    var div1=document.getElementById('div1');
    var div2=document.getElementById('div2');
    var div3=document.getElementById('div3');

    div1.addEventListener('click',function(){
        alert(this.id);
        this.style.borderColor='red';
        var self=this.style;
        setTimeout(function(){
            self.borderColor='black';
        },1000)
    },false);

    div2.addEventListener('click',function(){
        alert(this.id);
        this.style.borderColor='red';
        var self=this.style;
        setTimeout(function(){
            self.borderColor='black';
        },1000)
    },false);

    div3.addEventListener('click',function(){
        alert(this.id);
        this.style.borderColor='red';
        var self=this.style;
        setTimeout(function(){
            self.borderColor='black';
        },1000)
    },false)

javascript

阅读 7.8k

5 个回答

ne_smalltown

✓ 已被采纳

alert会阻塞所有线程，其中就包括GUI渲染线程（所以颜色不变）和主线程（所以setTimeout里面的任务只是在1秒后被添加到了任务队列里面，但是没有执行，需要你关闭了alert之后才会执行，但是你关闭第一个alert之后，马上又有同步任务了，所以那个第一个异步任务一直执行不了，必须等到所有同步任务执行完之后第一个异步任务才能执行，后面两个异步任务同理）

Sanda

27212

发布于
2016-09-21

更新于
2016-09-21

我运行是弹一个框改变一个颜色，并没有出现所有alert再变色的情况

代码如下

<!doctype html>
<html><head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <style>
        #div1{
            width:300px;
            height:300px;
            border:1px solid black;
        }
        #div2{
            margin:50px auto;
            width:200px;
            height:200px;
            border:1px solid black;
        }
        #div3{
            margin:50px auto;
            width:100px;
            height:100px;
            border:1px solid black;
        }
    </style>
</head> 
<body>
    
    
        <div id="div1">
        <div id="div2">
            <div id="div3">

            </div>
        </div>
    </div>

<script>
    var div1=document.getElementById('div1');
    var div2=document.getElementById('div2');
    var div3=document.getElementById('div3');

    div1.addEventListener('click',function(){
        alert(this.id);
        this.style.borderColor='red';
        var self=this.style;
        setTimeout(function(){
            self.borderColor='black';
        },1000)
    },false);

    div2.addEventListener('click',function(){
        alert(this.id);
        this.style.borderColor='red';
        var self=this.style;
        setTimeout(function(){
            self.borderColor='black';
        },1000)
    },false);

    div3.addEventListener('click',function(){
        alert(this.id);
        this.style.borderColor='red';
        var self=this.style;
        setTimeout(function(){
            self.borderColor='black';
        },1000)
    },false)
 
</script>
</body> 
</html>