记录9 交互式编程

到目前为止, 只要页面一加载, 就会运行页面中的JavaScript 代码,只有包含了对 alert 或 confirm 这样的函数调用的时候,程序才会暂停。但是,我们并不是总希望页面一加载就运行所有的代码,如果想要让一些代码延迟运行或者用户做了某些响应动作之后才运行,该怎么办呢?

用setTimeout函数延时代码

这个函数接受两个参数:分别是一段时间之后要调用的函数以及所要等待的时间(毫秒)。
如下就是一个最简单的例子，页面加载完成后3秒才弹出一个提示框

<body>
    <script type="text/javascript">
        var timeUp=function(){
            alert("Time's up!");
        };
        setTimeout(timeUp,3000);
    </script>
</body>

注意：
上面的例子仍然是页面一加载就运行所有的代码。
调用 setTimeout 的返回值表示该方法当前被调用的次数，第一次调用返回值是1，第二次调用返回值是2，以此类推。
下面的效果是一加载页面就执行全部js代码，先弹出提示框（显示值为1），点击“OK”后再弹出提示框（值为3），第二个提示框点击“OK”之后再过3秒之后弹出“Time's up!”，前面一个“Time's up!”点击“OK”之后再过3秒弹出“Time's up!”。

首先，页面所有代码都是一加载完代码就得到执行，setTimeout方法也是里面得到执行。（如果理解为3秒后才执行该方法，那么就是3秒后执行该方法然后接着等待3秒，总共得等6秒了）；其次，我们只有点击每个弹出框之后，后面的弹窗代码才会开始执行（所以我们在第一个弹窗不点击“OK”，等待3秒后也不会出现"Time's up!"弹窗）

<body>
    <script type="text/javascript">
        var timeUp=function(){
            alert("Time's up!");
        };
        var result=setTimeout(timeUp,3000);
        var result2=setTimeout(timeUp,3000);
        var result3=setTimeout(timeUp,3000);
        alert(result);
        alert(result3)
    </script>
</body>

取消一个timeout

例如我们使用 setTimeout 函数创建了一个延迟函数调用之后,可能会发现实际上并不想要调用该函数。例如我们设置一个闹钟来提醒做作业,但是作业已经提前完成了,那就想要取消这个闹钟。要取消 timeout,在 setTimeout 返回的timeoutID 上调用 clearTimeout 函数。

如下效果就是在4秒后弹窗“Finish homework before alarm,eat dinner..."

<body>
    <script type="text/javascript">
        var homeworkAlarm = function(){
            alert("Begin to do homework now..");
        };
        var eatDinner = function(){
            alert("Finish homework before alarm,eat dinner...");
        };
        var timeoutId1 = setTimeout(homeworkAlarm,3000);
        var timeoutId2 = setTimeout(eatDinner,4000);
        clearTimeout(timeoutId1);
    </script>
</body>

使用setInterval多次调用代码

setInterval 函数就像 setTimeout 函数一样,只不过它是重复调用指定的函数。接受两个参数:分别是想要调用的函数和间隔的时间长度。
像 setTimeout 返回 timeout ID 一样,setInterval 会返回 interval ID,可以使用clearInterval 函数和这个 interval ID 来告诉 JavaScript 停止执行重复调用。

如下例子，标题元素每 30 毫秒就会在屏幕上缓慢地移动 1 个像素直到移动了 200 个像素，然后回到起始点,再次开始移动，不断重复该过程。
使用 offset 方法设置标题距离屏幕左边缘的距离。

<body>
    <h1 id="heading">Rails is going...</h1>
    <script type="text/javascript">
        var leftOffset = 0;
        var moveHeading = function(){
            $("#heading").offset({left: leftOffset});
            leftOffset++;
            if(leftOffset > 200){
                leftOffset = 0;
            }
        };
        setInterval(moveHeading,30);
    </script>
</body>

如果我们想要恢复原来位置之后就停止重复调用，可以使用如下代码：

<body>
    <h1 id="heading">Rails is going...</h1>
    <script type="text/javascript">
        var leftOffset = 0;
        var moveHeading = function(){
            $("#heading").offset({left: leftOffset});
            leftOffset++;
            if(leftOffset > 200){
                leftOffset = 0;
                $("#heading").offset({left: leftOffset});
                clearInterval(id);
            }
        };
        var id=setInterval(moveHeading,30);
    </script>
</body>

对单击做出响应

当调用这个函数时,
click(clickHandler)的含义是“当单击 h1 元素时,调用 clickHandler 函数,并且将 event 对象传递给该函数”。在这个示例中,单击处理程序从这个event 对象中获取信息,并且在控制台输出单击位置的 x 坐标和 y 坐标。

event 参数是包含单击事件相关信息的一个对象，例如单击的位置pageX，pageY和其他很多事件本身的信息。

<body>
    <h1>Learn</h1>
    <script type="text/javascript">
        var clickHandler=function(event){
            alert("Click!"+event.pageX+"---"+event.pageY)
        }
        var s=document.getElementsByTagName("h1");
        s[0].onclick=clickHandler;  //注意点击事件关键字是onclick
    </script>
</body>

Paste_Image.png

上面的例子使用jQuery来写则是(注意点击事件关键字是click)：

<body>
    <h1>Learn</h1>
    <script type="text/javascript" src="jquery-3.1.1.js"></script>
    <script type="text/javascript">
        var clickHandler=function(event){
            alert("Click!"+event.pageX+"---"+event.pageY)
        }
        $("h1").click(clickHandler);
    </script>
</body>

鼠标移动事件

每次鼠标移动都会触发 mousemove 事件。
使用 $("html")选中这个 html 元素,以便当鼠标在页面上任何位置移动时都会触发这个处理程序。每次用户移动鼠标,都会调用传递到 mousemove 后面的括号中的函数。效果就是每次移动鼠标,标题将会移动到该位置。

<body>
    <h1 id="heading">Rails is going...</h1>
    <script type="text/javascript">
        $("heading").mousemove(function (event){
            $("#heading").offset({
                left: event.pageX,
                top: event.pageY
            });
        });
    </script>
</body>