【超全】JavaScript知识速查：基础语法与DOM操作
JavaScript知识速查
文章目录
- JavaScript知识速查
-
- @[toc]
- JavaScript 简介
-
- 在网页开发中的用途和意义：
- 示例：
- JavaScript 语法
-
- JavaScript 变量定义
-
- 变量命名规则：
- 变量的类型：
- 变量的作用域：
- 示例代码：
- JavaScript 数据类型
-
- 数据类型
- JavaScript 运算符
-
- 运算符
- JavaScript 语句与语法
-
- 控制流语句
- JavaScript函数
-
- 函数
- JavaScript数组
-
- 数组
- JavaScript对象
-
- 对象
- JavaScript DOM (Document Object Model)
- JavaScript DOM (Document Object Model)
-
- DOM结点操作
- JavaScript 定时器
文章目录
- JavaScript知识速查
-
- @[toc]
- JavaScript 简介
-
- 在网页开发中的用途和意义：
- 示例：
- JavaScript 语法
-
- JavaScript 变量定义
-
- 变量命名规则：
- 变量的类型：
- 变量的作用域：
- 示例代码：
- JavaScript 数据类型
-
- 数据类型
- JavaScript 运算符
-
- 运算符
- JavaScript 语句与语法
-
- 控制流语句
- JavaScript函数
-
- 函数
- JavaScript数组
-
- 数组
- JavaScript对象
-
- 对象
- JavaScript DOM (Document Object Model)
- JavaScript DOM (Document Object Model)
-
- DOM结点操作
- JavaScript 定时器
JavaScript 简介
JavaScript 是一种高级、解释型的编程语言，主要用于构建交互式的网站和应用。它是 Web 开发的三大核心技术之一，与 HTML 和 CSS 共同为开发者提供创建高效、动态、用户友好的网页和应用的能力。
在网页开发中的用途和意义：
-
交互性:
- JavaScript 使网页具有交互性，允许用户与网页进行交互，例如点击按钮、提交表单、动画效果等。
-
动态内容:
- 通过 JavaScript，开发者可以动态地修改 HTML 和 CSS，例如动态添加/删除元素、改变样式等。
-
表单验证:
- JavaScript 可以在用户提交表单之前在客户端进行表单验证，提高用户体验和系统效率。
-
实时更新:
- JavaScript 可以实现网页的实时更新，例如显示实时时间、动态加载新内容等，无需刷新页面。
-
Ajax 通信:
- JavaScript 支持 Ajax，允许开发者实现与服务器的异步通信，实时获取或发送数据。
-
客户端存储:
- 通过 JavaScript，开发者可以在用户的浏览器上存储数据，例如使用 localStorage 和 sessionStorage。
-
动画效果:
- JavaScript 可以创建动画效果，如轮播图、页面滑动效果、过渡效果等。
-
框架和库:
- 存在大量 JavaScript 库（如 jQuery）和框架（如 Angular、React、Vue.js），使得开发更为高效和强大。
示例：
下面是一个简单的 JavaScript 例子，展示了如何通过点击按钮来改变文本内容：
HTML:
DOCTYPE html>
<html>
<head>
<title>JavaScript Exampletitle>
head>
<body>
<p id="demo">Hello World!p>
<button type="button" onclick="changeText()">Click mebutton>
<script type="text/javascript">
function changeText() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
script>
body>
html>
在上述示例中：
- 我们首先创建了一个段落和一个按钮。
- 然后，我们编写了一个 JavaScript 函数
changeText，当用户点击按钮时，这个函数会被调用。 - 函数
changeText会找到 id 为 “demo” 的段落，并将其文本内容改为 “Hello JavaScript!”。
通过这个简单的例子，你可以看到 JavaScript 是如何使网页具有交互性的。用户点击按钮，网页的内容随之改变，而无需刷新页面。只有网页配上了JavaScript才能够称之为真正意义上的网页。现在，让我们开始JavaScript吧！
JavaScript 语法
JavaScript 变量定义
在 JavaScript 中，变量是用于存储数据值的容器。你可以使用变量来保存和操作数据。以下是JavaScript中变量定义的基本信息：
-
var 关键字 (逐渐被淘汰)：
- 在 ES6 之前，
var是定义变量的唯一关键字。 var定义的变量具有函数作用域，如果在函数外部定义，则具有全局作用域。
var x = 10; // 定义一个名为 x 的变量，并赋值为 10 - 在 ES6 之前，
-
let 关键字：
- 从 ES6 开始，
let是定义变量的新关键字。 let定义的变量具有块作用域，只在定义它的块（如 if 语句或循环）中有效。
let y = 20; // 定义一个名为 y 的变量，并赋值为 20 - 从 ES6 开始，
-
const 关键字：
const也是从 ES6 开始引入的，用于定义常量。const定义的变量也具有块作用域，但不能重新赋值。const必须在声明时初始化。
const z = 30; // 定义一个名为 z 的常量，并赋值为 30
变量命名规则：
- 变量名必须以字母、美元符号（$）或下划线（_）开头。
- 变量名可以包含字母、数字、美元符号（$）和下划线（_）。
- 变量名是大小写敏感的。
变量的类型：
JavaScript 是一种动态类型语言，意味着不需要预先声明变量的类型。变量的类型将根据赋给它的值而自动更改。
let variable = "hello"; // string 类型
variable = 42; // number 类型
变量的作用域：
- 全局作用域：在代码的任何地方都可以访问的变量。
- 函数作用域：只在函数内部可以访问的变量。
- 块作用域：只在某个代码块（如 if 语句或循环）内部可以访问的变量。
示例代码：
// 使用 var 定义变量
var a = 10;
// 使用 let 定义变量
let b = 20;
// 使用 const 定义常量
const c = 30;
// 动态类型
let variable = "string"; // string 类型
variable = 40; // number 类型
// 函数作用域
function testScope() {
var insideFunction = "accessible inside function";
}
// 块作用域
if (true) {
let insideBlock = "accessible inside block";
}
JavaScript 数据类型
数据类型
JavaScript 中有几种基本的数据类型，包括：
- Number（数字）:
- 用于表示整数和浮点数。
// 旧标准
var num1 = 42; // 整数
var num2 = 3.14; // 浮点数
// 新标准 (ES6+)
let num3 = 42; // 整数
const num4 = 3.14; // 浮点数
- String（字符串）:
- 用于表示文本。
// 旧标准
var str1 = 'Hello, world!';
var str2 = "Hello, world!";
// 新标准 (ES6+)
let str3 = 'Hello, world!';
const str4 = "Hello, world!";
- Boolean（布尔值）:
- 表示真或假。
// 旧标准
var bool1 = true;
var bool2 = false;
// 新标准 (ES6+)
let bool3 = true;
const bool4 = false;
- Null（空值）:
- 表示没有值或无值。
// 旧标准
var nothing = null;
// 新标准 (ES6+)
let nothing2 = null;
- Undefined（未定义）:
- 表示变量未被初始化。
// 旧标准
var und;
console.log(und); // undefined
// 新标准 (ES6+)
let und2;
console.log(und2); // undefined
- Object（对象）:
- 用于存储键值对集合。
// 旧标准
var obj1 = {
name: 'John',
age: 25
};
// 新标准 (ES6+)
const obj2 = {
name: 'John',
age: 25
};
- Array（数组）:
- 用于存储值的有序集合。
// 旧标准
var arr1 = [1, 2, 3, 4, 5];
// 新标准 (ES6+)
const arr2 = [1, 2, 3, 4, 5];
- Symbol（符号） (ES6+):
- 创建唯一的值，主要用于对象属性的键。
// 新标准 (ES6+)
const sym1 = Symbol('description');
const sym2 = Symbol('description');
console.log(sym1 === sym2); // false
以上就是 JavaScript 中的主要数据类型和它们的示例代码。在新标准 ES6+ 中，推荐使用 let 和 const 关键字来声明变量，而非旧标准中的 var。
JavaScript 运算符
运算符
JavaScript 中有多种运算符，它们可以进行不同类型的操作。下面列举了一些常见的运算符及其用法：
- 赋值运算符（Assignment Operators）:
- 用于将值赋给变量。
let x = 10;
const y = 20;
- 算术运算符（Arithmetic Operators）:
- 用于执行数学运算。
let a = 10 + 5; // 加法
let b = 10 - 5; // 减法
let c = 10 * 5; // 乘法
let d = 10 / 5; // 除法
let e = 10 % 3; // 模（余数）
let f = 10 ** 2; // 指数
- 比较运算符（Comparison Operators）:
- 用于比较两个值。
console.log(10 == '10'); // 相等（非严格比较，仅比较值）
console.log(10 === '10'); // 全等（严格比较，比较值和类型）
console.log(10 != '10'); // 不相等（非严格比较）
console.log(10 !== '10'); // 不全等（严格比较）
console.log(10 > 5); // 大于
console.log(10 < 5); // 小于
console.log(10 >= 10); // 大于或等于
console.log(10 <= 10); // 小于或等于
- 逻辑运算符（Logical Operators）:
- 用于基于一个或多个条件执行逻辑运算。
let g = true && false; // 逻辑与
let h = true || false; // 逻辑或
let i = !true; // 逻辑非
- 条件（三元）运算符（Conditional (Ternary) Operator）:
- 根据条件返回一个值。
let j = (10 > 5) ? 'Yes' : 'No'; // 如果10大于5，则返回'Yes'，否则返回'No'
- 递增和递减运算符（Increment and Decrement Operators）:
- 用于递增或递减变量的值。
let k = 10;
k++; // 递增
console.log(k); // 11
let l = 10;
l--; // 递减
console.log(l); // 9
- 位运算符（Bitwise Operators）:
- 用于执行二进制位运算。
let m = 5 & 3; // 位与
let n = 5 | 3; // 位或
let o = ~5; // 位非
let p = 5 ^ 3; // 位异或
let q = 5 << 1; // 左移
let r = 5 >> 1; // 右移
- 字符串运算符:
- 用于连接字符串。
let s = 'Hello, ' + 'world!';
console.log(s); // 'Hello, world!'
- 类型运算符（Type Operators）:
- 用于确定值的类型。
console.log(typeof 'Hello'); // string
console.log(typeof 10); // number
以上就是 JavaScript 中常见的一些运算符及其用法的示例。通过这些运算符，你可以执行各种不同类型的操作和计算。
JavaScript 语句与语法
控制流语句
控制流语句用于控制程序的执行流程，根据特定条件执行不同的代码块。以下是一些常见的控制流语句及其用法：
- If 语句（If Statement）:
- 根据条件执行代码。
let age = 18;
if (age >= 18) {
console.log('You are an adult.');
}
- Else 语句（Else Statement）:
- 如果
if语句的条件不成立时执行代码。
- 如果
let age = 16;
if (age >= 18) {
console.log('You are an adult.');
} else {
console.log('You are a minor.');
}
- Else If 语句（Else If Statement）:
- 如果
if语句的条件不成立时，可以提供一个或多个额外的条件。
- 如果
let age = 16;
if (age >= 18) {
console.log('You are an adult.');
} else if (age >= 16) {
console.log('You are almost an adult.');
} else {
console.log('You are a minor.');
}
- Switch 语句（Switch Statement）:
- 根据表达式的值，执行不同的代码块。
let fruit = 'apple';
switch (fruit) {
case 'banana':
console.log('You chose a banana.');
break;
case 'apple':
console.log('You chose an apple.');
break;
default:
console.log('You did not choose a banana or an apple.');
}
- For 循环（For Loop）:
- 重复执行代码块，直到条件不再满足。
for (let i = 0; i < 5; i++) {
console.log(i);
}
- While 循环（While Loop）:
- 当条件为真时重复执行代码块。
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
- Do While 循环（Do While Loop）:
- 至少执行一次代码块，然后在条件为真时继续执行。
let i = 0;
do {
console.log(i);
i++;
} while (i < 5);
- Break 语句（Break Statement）:
- 用于退出循环或 switch 语句。
for (let i = 0; i < 5; i++) {
if (i === 3) {
break;
}
console.log(i);
}
- Continue 语句（Continue Statement）:
- 用于跳过循环的当前迭代，进入下一迭代。
for (let i = 0; i < 5; i++) {
if (i === 3) {
continue;
}
console.log(i);
}
以上是 JavaScript 中常见的控制流语句及其用法的示例。通过这些语句，你可以控制代码的执行流程，执行不同的操作和计算。
JavaScript函数
函数
函数是一种封装代码的方式，它允许你定义代码块并通过名称来调用它。函数可以有参数和返回值。
- 函数声明（Function Declaration）:
- 使用
function关键字来声明函数。
- 使用
function greet(name) {
console.log('Hello, ' + name + '!');
}
greet('Alice'); // Output: Hello, Alice!
- 函数表达式（Function Expression）:
- 把一个函数赋值给一个变量。
const greet = function(name) {
console.log('Hello, ' + name + '!');
};
greet('Bob'); // Output: Hello, Bob!
- 箭头函数（Arrow Function）:
- 使用箭头符号 (
=>) 的简洁语法来创建函数。
- 使用箭头符号 (
const greet = (name) => {
console.log('Hello, ' + name + '!');
};
greet('Charlie'); // Output: Hello, Charlie!
- 默认参数（Default Parameters）:
- 为函数参数提供默认值。
function greet(name = 'User') {
console.log('Hello, ' + name + '!');
}
greet(); // Output: Hello, User!
- 剩余参数（Rest Parameters）:
- 允许你将不确定数量的参数表示为一个数组。
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10
- 立即执行函数表达式（Immediately Invoked Function Expression, IIFE）:
- 创建一个立即执行的函数。
(function() {
console.log('This function runs immediately!');
})();
- 闭包（Closures）:
- 闭包是有权访问其作用域链上层的函数，即使该函数在其上层作用域执行完毕后仍然能够访问上层作用域的变量。
function createCounter() {
let count = 0;
return function() {
count++;
console.log(count);
};
}
const counter = createCounter();
counter(); // Output: 1
counter(); // Output: 2
- 回调函数（Callback Functions）:
- 函数可以作为参数传递给其他函数，并在那些函数内部被调用。
function doSomething(callback) {
console.log('Doing something...');
callback();
}
doSomething(function() {
console.log('Callback function executed!');
});
- 异步函数（Async Functions）:
- 使用
async关键字声明的函数，可以包含await表达式，以暂停和恢复函数的执行。
- 使用
async function fetchData(url) {
const response = await fetch(url);
const data = await response.json();
console.log(data);
}
fetchData('https://api.example.com/data');
以上是 JavaScript 中与函数相关的一些基本和高级概念。通过理解和应用这些概念，你可以更有效地组织和管理代码，处理各种程序设计任务。
JavaScript数组
数组
数组是一个可以包含多个值的特殊变量。每个值都有一个位置索引，从0开始。
- 创建数组:
- 可以使用数组字面量创建数组。
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']
- 访问数组元素:
- 通过索引来访问数组的元素。
console.log(fruits[0]); // Output: 'Apple'
- 修改数组元素:
- 通过索引来修改数组的元素。
fruits[1] = 'Blueberry';
console.log(fruits); // Output: ['Apple', 'Blueberry', 'Cherry']
- 数组长度:
- 使用
length属性获取数组的长度。
- 使用
console.log(fruits.length); // Output: 3
- 添加元素:
- 使用
push方法在数组末尾添加元素。
- 使用
fruits.push('Durian');
console.log(fruits); // Output: ['Apple', 'Blueberry', 'Cherry', 'Durian']
- 删除元素:
- 使用
pop方法删除数组末尾的元素。
- 使用
fruits.pop();
console.log(fruits); // Output: ['Apple', 'Blueberry', 'Cherry']
- 添加元素到数组的开头:
- 使用
unshift方法在数组的开头添加元素。
- 使用
fruits.unshift('Avocado');
console.log(fruits); // Output: ['Avocado', 'Apple', 'Blueberry', 'Cherry']
- 删除数组的第一个元素:
- 使用
shift方法删除数组的第一个元素。
- 使用
fruits.shift();
console.log(fruits); // Output: ['Apple', 'Blueberry', 'Cherry']
- 查找元素:
- 使用
indexOf方法查找元素的索引。
- 使用
console.log(fruits.indexOf('Blueberry')); // Output: 1
- 遍历数组:
- 使用
forEach方法遍历数组。
- 使用
fruits.forEach(function(item, index, array) {
console.log(item, index);
});
- 数组切片:
- 使用
slice方法创建一个新的数组，它包含原数组的指定部分。
- 使用
let citrusFruits = fruits.slice(1, 3);
console.log(citrusFruits); // Output: ['Blueberry', 'Cherry']
- 数组拼接:
- 使用
concat方法将两个或多个数组连接在一起。
- 使用
let vegetables = ['Carrot', 'Potato'];
let food = fruits.concat(vegetables);
console.log(food); // Output: ['Apple', 'Blueberry', 'Cherry', 'Carrot', 'Potato']
- 数组排序:
- 使用
sort方法对数组的元素进行排序。
- 使用
fruits.sort();
console.log(fruits); // Output: ['Apple', 'Blueberry', 'Cherry']
通过以上的描述和示例代码，可以了解到JavaScript数组的基本操作和常用方法，这些方法提供了对数组元素的增、删、查、改等操作。同时，也能理解数组在编程中的重要性和其在数据管理方面的应用。
JavaScript对象
对象
JavaScript对象是键值对的集合，它是一种复杂的数据结构，可以包含多个属性和方法。
- 创建对象:
- 使用对象字面量创建对象。
let person = {
firstName: "John",
lastName: "Doe",
age: 25
};
console.log(person); // Output: {firstName: "John", lastName: "Doe", age: 25}
- 访问对象属性:
- 使用点标记法或方括号标记法访问对象的属性。
console.log(person.firstName); // Output: 'John'
console.log(person['lastName']); // Output: 'Doe'
- 修改对象属性:
- 直接赋值来修改对象的属性。
person.age = 26;
console.log(person.age); // Output: 26
- 添加新属性:
- 直接赋值来添加新的属性。
person.gender = 'male';
console.log(person.gender); // Output: 'male'
- 删除属性:
- 使用
delete操作符删除对象的属性。
- 使用
delete person.gender;
console.log(person.gender); // Output: undefined
- 检查属性是否存在:
- 使用
in操作符检查对象是否包含某个属性。
- 使用
console.log('firstName' in person); // Output: true
console.log('gender' in person); // Output: false
- 遍历对象:
- 使用
for...in循环遍历对象的属性。
- 使用
for (let key in person) {
console.log(key, person[key]);
}
- 方法:
- 对象可以包含方法（函数）。
let person = {
firstName: "John",
lastName: "Doe",
getFullName: function() {
return this.firstName + ' ' + this.lastName;
}
};
console.log(person.getFullName()); // Output: 'John Doe'
- 对象构造函数:
- 使用构造函数创建对象。
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
let person1 = new Person('John', 'Doe', 25);
console.log(person1); // Output: Person {firstName: "John", lastName: "Doe", age: 25}
通过以上的描述和示例代码，可以了解到JavaScript对象的基本操作和常用方法，以及如何对对象的属性和方法进行增、删、查、改等操作。同时，也能理解对象在编程中的重要性和其在数据管理及功能封装方面的应用。
JavaScript DOM (Document Object Model)
JavaScript DOM 是一个编程接口，它为Web文档提供了结构化的表示，并使程序能够访问和修改文档的结构、样式和内容。当网页被加载时，浏览器会创建页面的文档对象模型（DOM），它将网页文档作为节点树来组织，使得JavaScript可以通过选择和操作这些节点来影响网页的显示和行为。
- 获取元素:
- 通过ID获取元素：
let element = document.getElementById("myElement");
- 通过类名获取元素：
let elements = document.getElementsByClassName("myClass");
- 通过标签名获取元素：
let elements = document.getElementsByTagName("div");
- 通过CSS选择器获取元素：
let element = document.querySelector("#myElement");
let elements = document.querySelectorAll(".myClass");
- 修改元素内容:
- 修改元素的文本内容：
element.textContent = "New text content";
- 修改元素的HTML内容：
element.innerHTML = "New HTML content";
- 修改元素属性:
- 获取、设置、删除属性：
element.getAttribute('title'); // 获取title属性
element.setAttribute('title', 'New Title'); // 设置title属性
element.removeAttribute('title'); // 删除title属性
- 修改元素样式:
element.style.color = "blue";
element.style.fontSize = "20px";
- 元素的类操作:
- 添加、删除、切换类：
element.classList.add("newClass"); // 添加类
element.classList.remove("oldClass"); // 删除类
element.classList.toggle("toggleClass"); // 切换类
- 创建和插入元素:
let newElement = document.createElement("div"); // 创建新元素
element.appendChild(newElement); // 将新元素插入到现有元素的末尾
- 删除元素:
element.removeChild(newElement); // 从现有元素中删除子元素
- 事件监听:
element.addEventListener("click", function() {
alert("Element was clicked!");
});
通过上述的示例和解释，你可以了解到JavaScript DOM的基本操作，以及如何通过JavaScript来获取、修改、添加或删除DOM元素和属性，以及如何为DOM元素添加事件监听器。DOM是JavaScript在网页开发中非常核心的概念，它使得JavaScript能够与网页交互，为网页提供动态功能。
JavaScript DOM (Document Object Model)
JavaScript DOM (Document Object Model) 是为 HTML 和 XML 文档提供了结构化的表示。它是一个用于文档的编程接口（API），可以让开发者通过 JavaScript 来访问和更新文档的内容、结构和样式。JavaScript 的 DOM 操作是前端开发中非常核心和基础的知识点，对于理解和掌握前端开发有着至关重要的意义。
DOM 将文档解析为一个由节点和对象（包括元素如 以下是 JavaScript DOM 的主要特点和操作： JavaScript 提供了一些内置的定时器函数，允许开发者在特定的时间间隔后执行代码，或者在一段时间延迟后执行代码。这为创建动画、游戏或其他时间敏感的应用程序提供了基础。 主要有两种类型的定时器： 清除定时器: 通过定时器和 和 DOM结点操作
let elementById = document.getElementById('myElement');
let elementsByClassName = document.getElementsByClassName('myClass');
let elementsByTagName = document.getElementsByTagName('div');
let singleElement = document.querySelector('.myClass'); // 返回第一个匹配的元素
let allElements = document.querySelectorAll('.myClass'); // 返回所有匹配的元素
textContent 或 innerHTML 属性来修改元素的内容。element.textContent = "New text content";
element.innerHTML = "New HTML content";
getAttribute() 和 setAttribute() 方法来获取和设置元素的属性。let title = element.getAttribute('title');
element.setAttribute('title', 'New Title');
removeAttribute() 方法来移除元素的属性。element.removeAttribute('title');
style 属性来直接设置元素的样式。element.style.color = "blue";
element.style.fontSize = "20px";
classList 属性来添加、删除或切换元素的类。element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('toggleClass');
document.createElement() 方法来创建新元素。let newElement = document.createElement('div');
appendChild() 或 insertBefore() 方法来插入新元素。element.appendChild(newElement); // 在末尾插入新元素
element.insertBefore(newElement, element.firstChild); // 在开始处插入新元素
removeChild() 方法来删除子元素。element.removeChild(newElement);
addEventListener() 方法来为元素添加事件监听器。element.addEventListener('click', function() {
alert('Element was clicked!');
});
removeEventListener() 方法来移除事件监听器。function handleClick() {
alert('Element was clicked!');
}
element.addEventListener('click', handleClick);
element.removeEventListener('click', handleClick);
childNodes, children, parentNode 和 parentElement 属性来访问元素的子元素和父元素。let childNodes = element.childNodes;
let children = element.children;
let parentNode = element.parentNode;
let parentElement = element.parentElement;
nextSibling, nextElementSibling, previousSibling 和 previousElementSibling 属性来访问元素的兄弟元素。let nextSibling = element.nextSibling;
let nextElementSibling = element.nextElementSibling;
let previousSibling = element.previousSibling;
let previousElementSibling = element.previousElementSibling;
JavaScript 定时器
setTimeout:
setTimeout 用于在指定的毫秒数后执行一段代码。var timeoutID = setTimeout(function, delay, arg1, arg2, ...);
var timeoutID = setTimeout(function() {
alert('This message will appear after 2 seconds');
}, 2000);
setInterval:
setInterval 用于每隔指定的毫秒数重复执行一段代码。var intervalID = setInterval(function, delay, arg1, arg2, ...);
var counter = 0;
var intervalID = setInterval(function() {
counter++;
console.log('This message will appear every 2 seconds. Counter: ' + counter);
if (counter >= 5) {
clearInterval(intervalID); // 在 counter 达到 5 时停止定时器
}
}, 2000);
clearTimeout 和 clearInterval 函数来取消之前通过 setTimeout 和 setInterval 设置的定时器。clearTimeout(timeoutID);
clearInterval(intervalID);
var timeoutID = setTimeout(function() {
alert('This message will never appear due to clearTimeout');
}, 2000);
clearTimeout(timeoutID); // 取消定时器
requestAnimationFrame:
requestAnimationFrame 是一个更现代、更高效的替代方案，它允许浏览器在下一个重绘之前调用你的函数，以此来更新动画。var animationID = requestAnimationFrame(callback);
function animate() {
// Update your animation here...
requestAnimationFrame(animate);
}
animate(); // 开始动画
requestAnimationFrame，你可以在 JavaScript 中实现时间控制和动画效果，从而为用户提供丰富的交互体验。