一个自动翻谱的页面

起因：其实从很早之前就有过这方面的问题，就是在平时弹琴的时候，谱子很很多张图片，然后弹完这一页之后就必须得去翻谱子，这样总是得停下来很烦人，但是自己一直也很懒。。。。就一直用手翻没有去解放生产力，最近买了新电脑终于可以愉快地在家开发了~ 所以利用周末就做了一个可以设置好时间点自己翻谱子的页面~ 目前的版本功能还不完善，就是可以设置响应时间点来翻谱子，没有什么其他功能，因为是自己用可以满足自己的需求就可以了，如果以后还会有人用到的话，可能会考虑再添加一些功能吧~

这个是地址咯~

这个页面因为第一开始就是从简单出发的，没有考虑用到框架，所以就是用了最简单的jQuery来完成的。（因为好长时间不用jQuery，当我去写jQuery的时候，我发现自己已经忘了不少了，还得不时的去翻文档真要命 😂😂😂 ）

首先是选取文件，整个逻辑基本就是照搬MDN的文档上面的例子在web应用中使用文件，这个选取文件部分的逻辑基本没有变，就是在整个逻辑部分做了一些处理，而且还存在一些小bug，但是整个流程上面没有什么问题了。

就说制作当中遇到的几个技术盲点吧。

一、setTimeout的问题，我在计时处理的时候用的是setTimeout，然后递归的去调用自己。然后发现自己调用的时候，只执行了一次就停止了，那肯定是我写的方法不对，然后就一番搜索。

problem with setTimeout “function is not define” !

基本有两种方法可以使用：

function changePosition () {
      index++
      console.log(index)
      timer = setTimeout(changePosition, 1000)
    }
    
function changePosition () {
      index++
      console.log(index)
      timer = setTimeout(function() {changePosition()}, 1000)
    }

二、更改input中placehodler的颜色，这个问题其实以前就遇到过，然后解决了时间久了就又忘了，还是贴出来一下吧：

使用CSS修改HTML5 input placeholder颜色


input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color:    #666;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color:    #666;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  color:    #666;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color:    #666;
}

三、第三个是和jquery相关的，我对jquery的了解不够多，其实这个问题应该很普遍，就是事件解绑上面，在原生上面是addEventListener和removeEventListener，在jquery中只需要用到.off()和.on()就可以了。

剩下基本没有问题了，后来又从setTimeout看到了JavaScript的运行机制，我先放一小段代码在这里：

var start = new Date();  
var end = 0;  
setTimeout(function() {   
  console.log(new Date() - start);  
},  500);  
while (new Date() - start <= 1000) {}

你认为这个运行的结果是什么呢？

答案是1000+（1000以上的数字）

如果你的答案是错的，那你也应该了解一下JavaScript运行的机制了。

有这么两篇文章应该可以帮你理清思路：

你应该知道的setTimeout秘密

JavaScript 运行机制详解：再谈Event Loop

还有一个视频：

What the heck is the event loop anyway?