前端技术学习第五讲：JavaScript高级应用

最新推荐文章于 2024-07-04 11:38:55 发布

铁达尼灬胖

最新推荐文章于 2024-07-04 11:38:55 发布

阅读量205

点赞数 1

文章标签：学习开发语言 javascript

本文链接：https://blog.csdn.net/u010611510/article/details/123800964

版权

JavaScript高级应用

一、JavaScript定时器

定时器，有时也称为“计时器”，用来在经过指定的时间后执行某些任务，类似于我们生活中的闹钟。在 JavaScript 中，我们可以利用定时器来延迟执行某些代码，或者以固定的时间间隔重复执行某些代码。JavaScript 中提供了两种方式来设置定时器，分别是 setTimeout() 和 setInterval()。

方法名称	方法描述
setTimeout()	在指定的时间后（单位为毫秒），执行某些代码，代码只会执行一次
setInterval()	按照指定的周期（单位为毫秒）来重复执行某些代码，定时器不会自动停止，除非调用 clearInterval() 函数来手动停止或着关闭浏览器窗口

setTimeout()
setTimeout() 函数用来在指定时间后执行某些代码，代码仅执行一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript定时器</title>
</head>
<body>
    <script type="text/javascript">
        var myShow = function (str = 'JavaScript'){
            document.write(str + "<br>");
        };

        setTimeout(myShow, 500, 'Hello');
        setTimeout(myShow, 1000);
        setTimeout(function(){
            document.write("定时器<br>");
        }, 1500)
        setTimeout("document.write(\"setTimeout()\")", 2000);
    </script>
</body>
</html>

setInterval()
setInterval() 函数可以定义一个能够重复执行的定时器，每次执行需要等待指定的时间间隔。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <p id="1"></p>
    <p id="2"></p>
    <script type="text/javascript">
        var num = 1;
        var myShow = function (){
            document.getElementById('1').innerHTML += num + "&nbsp;";
            num ++;
        };

        setInterval(myShow, 500);
        setInterval(function(){
            var d = new Date();
            document.getElementById('2').innerHTML = d.toLocaleTimeString();
        }, 1000);
    </script>
</body>
</html>

取消定时器
当使用 setTimeout() 或 setInterval() 设置定时器时，这两个方法都会产生一个定时器的唯一 ID，ID 为一个正整数值，也被称为“定时器标识符”，通过这个 ID，我们可以清除 ID 所对应的定时器。可以借助 clearTimeout() 或 clearInterval() 函数来分别清除由 setTimeout() 或 setInterval() 函数创建的定时器。调用 clearTimeout() 或 clearInterval() 函数需要提供定时器的唯一 ID 作为参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <p>当前时间为：<span id="clock"></span></p>
    <button onclick="stopClock(this);">停止</button><hr>
    <button onclick="delayedAlert(this);">2秒后弹出一个提示框</button>
    <button onclick="clearAlert();">取消</button>
    <script type="text/javascript">
        var intervalID;
        function showTime() {
            var d = new Date();
            document.getElementById("clock").innerHTML = d.toLocaleTimeString();
        }

        function stopClock(e) {
            clearInterval(intervalID);
            e.setAttribute('disabled', true)
        }
        intervalID = setInterval(showTime, 1000);

        var timeoutID;
        var that;
        function delayedAlert(e) {
            that = e;
            timeoutID = setTimeout(showAlert, 2000);
            e.setAttribute('disabled', true)
        }
        function showAlert() {
            alert('这是一个提示框。');
            that.removeAttribute('disabled');
        }
        function clearAlert() {
            clearTimeout(timeoutID);
            that.removeAttribute('disabled');
        }
    </script>
</body>
</html>

二、JavaScript异常处理

在编程中，有时代码并不会像我们预期的那样运行，会遇到各式各样的错误，例如代码中使用了错误的符号、调用未定义的方法、网络错误、读取不存在的文件、没有操作权限等。
根据类型的不同，JavaScript 编程中的错误大致可以分为以下三种类型：

语法错误：也称为解析错误，一般是因为代码存在某些语法错误引起的。当发生语法错误时，代码会停止运行；
运行时错误：也称为异常，发生在程序运行期间，例如调用未定义的方法、读取不存在的文件等，发生运行时错误也会终止代码运行；
逻辑错误：是最难发现的一种错误，逻辑错误通常是因为代码存在瑕疵，导致程序输出意外的结果或终止运行。

错误和异常的区别
错误（Error）是在代码运行之前出现的，在运行 JavaScript 程序之前，JavaScript 解释器会先对代码进行检查，如果代码有误，例如某些语法错误，浏览器就会报出相应的错误，只有将错误修正后，代码才能运行。

异常（Exception）是在代码运行中出现的，例如调用某个未定义的方法、读取不存在的文件等。在出现异常之前，代码的运行并不受影响，当出现异常时，会在浏览器控制台输出错误信息，并终止程序的运行。
JS 异常处理
异常处理的目的是捕捉产生异常的代码，使整个程序不会因为异常而终止运行。在 JavaScript 中，您可以使用 try catch 语句来捕获异常，并做出相应处理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        try {
            var title = "JavaScript";
            document.write(title);
            // 调用一个未定义的变量
            document.write(str);
            // 若发生错误，则不会执行以下行
            alert("所有语句都已成功执行。");
        } catch(error) {
            // 处理错误
            alert("错误信息: " + error.message);
        }finally {
            document.write("<p>我必须被执行</p>");
        }
        // 继续执行下面的代码
        document.write("<p>Hello World!</p>");
    </script>
</body>
</html>

错误类型
前面我们提到，当 try 语句块中的代码出现错误时，会创建并抛出一个 Error 对象，对象中包含错误类型和错误描述两个属性。发生不同的错误，会返回不同的错误类型。

错误类型	错误说明
EvalError	使用 eval() 函数时发出错误，会抛出该错误
InternalError	由 JavaScript 引擎内部错误导致的异常，会抛出该错误
RangeError	范围错误，当使用了超出允许范围的数值时，会抛出该错误
SyntaxError	语法错误，当代码中存在任何语法错误时，会抛出该错误
TypeError	类型错误，当使用的值不是预期类型时，会抛出该错误，例如对数字调用字符串方法，对字符串调用数组方法等
URIError	URI 错误，当使用 URI 相关函数但传入 URI 参数时，会抛出该错误
ReferenceError	参数错误，当尝试使用未定义的变量、函数、对象时，会抛出该错误