由编写Blocking Search动画引出的知识点

动画控制-定时器

引用自：异步控制完成sleep功能
具体如下：

1
2
3
4
5
6
7
8
9
10
11
async function test() {
  console.log('Hello')
  await sleep(1000)
  console.log('world!')
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

test()

关键点：

  • async
  • await
  • Promise对象
  • setTimeout
  • “=>”箭头函数
    在Blocking Search动画中的应用：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function sleep(ms) {
    	return new Promise(resolve => setTimeout(resolve, ms));
    }

    async function startBlockingSearch(desired_letter, array) {
    ...
    	for (i=1; i<=BLOCK_NUM; i++) {
    		...
    		await sleep(SEARCH_INTERVAL_TIME/2);
    		...
    	}
    ...
    }

实现效果：
blocking search

JS动态命名变量名

法一：用eval

例子如下：

1
2
3
4
5
var Thread_num=5;
for(var i=1;i<=Thread_num;i++){
eval("var set_" + i + "=" + i);
}
alert(set_5);

但是此方法有一个缺点：eval函数占用内存，建议用法二

法二：用数组

例子如下：

1
2
3
4
5
var Thread_num=5;
var arr=[];
for(var i=1;i<=Thread_num;i++){
arr[i] = i;
}

在Blocking Search动画中的应用：

1
2
3
4
5
6
7
var ID_index=[];
for (i=1; i<=BLOCK_NUM; i++) {
	...
	ID_index[i] = new ID(key, start, end);
	console.log("ID_index"+i+": key = "+key+" start = "+start+" end = "+end);
	...
}

JS中构建结构体数组

在Blocking Search动画中的应用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 块结构
var ID = function(key, start, end) {
	var self = this;
	self.key = key;
	self.start = start;
	self.end = end;
};
async function startBlockingSearch(desired_letter, array) {
	...
	var key, start, end;
	var ID_index=[];
	for (i=1; i<=BLOCK_NUM; i++) {
		start = j+1;
		j = j+1;
		end = j+4;
		j = j+4;
		key = array[j];
		ID_index[i] = new ID(key, start, end);
		console.log("ID_index"+i+": key = "+key+" start = "+start+" end = "+end);
		...
	}
}

其中 ID_index = [] 就是构建的结构体数组。

原生JS如何删除Ul下class为active的li （没有用到，偶然搜到）

比如说，ul下有5个li，其中3个class是active的，我要把这3个元素节点删除，我写了这样的代码

1
2
3
4
5
oBtn2.onclick=function(){
    var aActive=oUl.getElementsByClassName('active');
    for(var i=0;i<aActive.length;i++){
        oUl.removeChild(aActive[i]);
}

当点击btn2时，首先获取oUl下所有class为active的li，然后遍历删除，我后来大概知道是哪里出的问题，就是每次删除一个后，aActive的个数变了，因为aActive是动态的。
我才学js不久，只知道removeChild删除单个节点的方法，还有什么简单的办法可以实现删除一堆节点么？

回答一：
将aActive长度保存即可，for(var i=0,len=aActive.length; i<len; i++){oUl.removeChild(aActive[0])}，要注意的是低版本ie不支持getElementsByClassName方法，如果要兼容，要遍历所有节点查找。getElementsByTagName,getElementsByName这些方法都是动态，实时的，即是会根据节点的增删变化而变化的

回答二：
数组的splice()方法,aActive.splice(0,3)

回答三：
html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ul>
  <li class='a'>1</li>
  <li class='a'>2</li>
  <li class='a'>3</li>
  <li>4</li>
</ul>
  <button>点击</button>
</body>
</html>

javascript

1
2
3
4
5
6
7
8
9
10
var btn=document.querySelector('button');
var activeIlists=document.getElementsByClassName('a');
var ul=document.querySelector('ul');
btn.onclick=function(){
  if(activeIlists.length>0){
   for(var i=0;i<=4;i++){     
     ul.removeChild(activeIlists[i]);
   }
  }
};

实现效果：点击这里查看

回答四：从后往前删除，这样即使删除了li，也不会影响前面节点的位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<ul>
    <li class="active">1</li>
    <li >2</li>
    <li class="active">3</li>
    <li >4</li>
    <li class="active">5</li>
</ul>
<script type="text/javascript">
function removeByClass()
    {
        var ul = document.getElementsByTagName('ul')[0];
        var _li = ul.getElementsByTagName('li');
        
        for(var i = _li.length -1; i >= 0; i--){
            if(_li[i].className =='active'){
                ul.removeChild(_li[i]);
            }
        }
    }

window.onload = removeByClass();
</script>
</body>
</html>

主要重点是removeChild 函数对DOM的即时影响。

JS在数组前添加元素

用unshift方法：

1
2
var a = [1,2,3,4,5]; 
var b = a.unshift(0);

则 a = [0,1,2,3,4,5];
b=6,即添加后数组长度

JavaScript String.slice() 函数详解

点击这里

getElementsByClassName() 方法

点击这里

CSS 变量

点击这里

在Blocking Search动画中的应用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 定义一些颜色变量 */
:root {
	/* 分块区 */
	--block_1-color: FireBrick;
	--block_2-color: DarkSeaGreen;
	--block_3-color: Bisque;
	--block_4-color: Aquamarine;
	--block_5-color: CornflowerBlue;
}
ul.data li.block_1 {
	color: var(--block_1-color);
}
ul.data li.block_2 {
	color: var(--block_2-color);
}
ul.data li.block_3 {
	color: var(--block_3-color);
}
ul.data li.block_4 {
	color: var(--block_4-color);
}
ul.data li.block_5 {
	color: var(--block_5-color);
}