例题—js（6）

二十七、js的两种定时器(setTimeout和setInterval的区别)

setTimeout只在指定时间后执行一次

setTimeout(function(){
	alert('执行');
},2000);

setInterval以指定时间为周期循环执行

setInterval(function(){
	alert('执行');
},2000);

一般情况下setTimeout用于延迟执行某方法或功能，
setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步
清除Timeout的定时器,
传入id(创建定时器时会返回一个id) clearTimeout(i);

清除Interval的定时器,
传入id(创建定时器时会返回一个id) clearInterval(j);

---

二十八、JS内存泄露

1.JS内存空间分为栈、堆、池（一般归并到栈中）

• 基本数据类型string、number、boolean、null、undefined保存在栈中
• 复杂数据类型object保存在堆中
• 常量存放在池中
• js中分配的内存的生命周期为：内存分配->内存使用->内存回收

2.哪些操作会造成内存泄漏？
内存泄漏指任何对象在不再拥有或不需要它之后依然存在，即这部分内存用完之后并没有返回到内存池。

• setTimeout第一个参数是字符串而不是函数的时候就会造成内存泄漏 闭包
• 控制台日志
• 循环（两个对象彼此引用且彼此保留）
• 全局变量
  如果你不断的创建全局变量，不管有没有用到他们，他们都将滞留在程序的整个执行过程中。
• 事件监听器
  在页面中创建事件监听器，但是在页面跳转时，又忘记移除这些监听器，那么也可能导致内存泄漏。

---

二十九、MVVM和MVC区别？（需完善）

MVVM
MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

ViewModel如何编写？需要用JavaScript编写一个通用的ViewModel，这样，就可以复用整个MVVM模型了。

MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来！

---

三十、实现冒泡排序

冒泡排序原理：

• 比较相邻的元素。如果第一个比第二个大，就交换他们两个。
• 对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。
• 针对所有的元素重复以上的步骤，除了最后一个。
• 持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比比较

let arr=[50,999,10,200,159,521,3,8,100];
function aSort(arr){
	//循环次数
	let max=arr.length-1;
	//外层循环控制比较次数，每次循环都会找出一个最大值
	for(let j=0;j<max;j++){
		//内存循环控制比较次数，并判断大小
		for(let i=0;i<max-j;i++){
			//如果前面的数大就把交换位置
			if(arr[i]>arr[i+1]){
				//定义一个变量保存前面的大数
				let temp=arr[i];
				//将小数换到前面
				arr[i]=arr[i+1];
				//将大数换到后面
				arr[i+1]=temp;
			}
		}
	}
	return arr;
}
console.log(aSort(arr));

---

三十一、实现轮播图的思路

1.图片轮播：

• 设定两个类 .active{opacity:1} .opacity{opacity:0}
• 将第一张图片添加class=‘active’
• 设定一个定时器，每隔一段时间拿到当前轮播图片的index
• 将此index图片移除类名active，添加类名opacity
• 将下一张图片添加类名active
• 轮播到最后一张图通过判断将index=0，跳转会第一张图

2.上/下一张切换按钮

• 绑定点击事件
• 拿到当前正在轮播图片的index
• 将本张图片移除类名active，添加类名opacity
• 如果是上一张将index-1的图片添加类名active
• 如果是下一张将index+1的图片添加类名active
• 第一张图片左切，设定index=最后一张图的index
• 最后一张图右切，设定index=第一张图的index

3.圆点轮播(圆点和图片对应)

• 设定两个类.red{background-color: red} .white{background-color: white}
• 将第一张图片添加class=‘red’
• 设定一个定时器，每隔一段时间拿到当前有颜色圆点的index
  将此index圆点移除类名white，添加类名red
  将下个圆点添加类名red
• 轮播到最后一个圆点通过判断将index=0，跳转会第一张圆点

4.圆点按钮点击跳转到对应图片

• 绑定点击事件
• 点击哪个圆点就拿到哪个圆点的index
• 将所有图片移除类名active，添加类名opacity
• 将此index图片移除类名opacity，添加类名active
• 将所有圆点移除类名red，添加类名white
• 将此index圆点移除类名white，添加类名red