阿段博客

《小代码大世界》随机抽奖方法和关键词搜索请求优化

前言

  技术经理(以下简称“大欢哥”,因为大欢哥人高马大的)一日出差回来,在楼下休息听到 “今日头条” 的前端网面(头条就在我们公司隔壁。公司楼下有休息区,可以坐那喝咖啡)。两个javaScript题目。

  今天早上来上班,包还没放下,就一脸神秘的对我说 “ 我这听到 头条的前端面试题,等我吃完饭回来给你说,考考你,嘿嘿 ”,我的小心肝一下就紧张了。“头条”、“面试题”...貌似人生巅峰来了!!!做出来就有白富美啦!!!

  终于吃完饭回来了,出题了.....

正文

  回归技术!!!回归正文!!!

  题目一:输入框实现输入文字,后台请求获取数据,用户输入后JS可以性能丢丢,减少请求次数!

  具体表现:用户连续输入“abc”,查询 “abc”,而不是查询“a”,“ab”,“abc”。。。

  关键点:用户输入 间隔时间 满足要求则请求

  实现代码:(欢迎指正)

 1 <input type="text" name="" id="search_text">
 2     <script type="text/javascript">
 3         var lastValue,//上一次输入值
 4             inputIng;//定时器保存
 5         document.getElementById('search_text').oninput=function(){
 6             //监听input值变化
 7             var input=false,//是否在输入状态
 8                 that=this;
 9             window.clearTimeout(inputIng);
10             inputIng=setTimeout(function(){
11                 if(!input){
12                     if(lastValue==that.value){
13                         return;
14                     }
15                     console.log(that.value);
16                     lastValue=that.value;
17                     input=true;
18                 }
19             },800);//时间调整确定用户输入间隔 实践之后800ms最合适
20         }
21 </script>

  题目二:实现一个Function,要求入参为array,返回一个方法,调用方法返回数组中的一个值,值不重复,数组所有值返回完毕,重新返回!

  关键点:数组在内存中的存储

  实现代码:(此处贴我实现的代码,与要求有差距)。

 1     //我写的(大错误改正了,还有一个隐藏错误)
 2         function ran(arr){
 3             this.arr=arr.join(',').split(',');//当前操作数组
 4             this.oldArr=arr.join(',').split(',');//备份数组
 5             this.randomNum=function(){//定义方法操作数组返回值
 6                 if(this.arr.length==0)this.arr=this.oldArr.jion(',').split(',');//如果当前操作数组值没有了,就从备份数组中备份
 7                 var index=Math.round(Math.random()*this.arr.length-1);//获取数组中随机下标四舍五入取整数 (此写法有错,自己思考改正)
 8                 return this.arr.splice(index,1).toString();//返回下标对应的值
 9             };
10         }
11         var arr=[0,1,2,3,4,5];
12         var a = new ran(arr);
13         console.log(a.randomNum());
14 
15         //大欢哥写的 参考思路实现,不是大欢哥原代码
16         function Ran(arr){
17             var newArr = arr.slice();
18             var TemArr = arr.slice();
19             return function(){
20                 if(newArr.length==0){
21                     newArr=TemArr.slice();
22                 }
23                 var index = Math.floor(Math.random()*newArr.length);
24                 var keyVale = newArr[index];
25                 newArr.splice(index,1);
26                 return keyVale;
27             };
28         }
29 
30         var fun = Ran(arr);
31         console.log(fun());

  最后测试结果是:功能都实现(忽略我的隐藏bug),大欢哥写的性能在我的150%以上!

  测试代码得出:1、' '+Num 转字符串的方式比 Num.toString() 性能高

         2、由上衍生出,以下方式一和和方式二对比,谁随机的数比较公平(下一个随笔会详细论证)

var ran1 = Math.floor(Math.random()*a.length);//方式一

var ran2 = Math.round(Math.random()*(a.length-1));//方式二

         3、尽量精简API的调用

结束总结

  程序员的世界你不懂!为了讨论问题可以不吃饭、可以不回家、可以一个问题诞生很多问题。。。。。

posted @ 2017-08-04 21:12  阿段  阅读(365)  评论(1编辑  收藏  举报