折叠何宝莹


  • 首页

  • 关于

  • 归档
折叠何宝莹

throttle 和 debounce 的原理和实现

发表于 2018-07-28 |

近期面试遇到了这道题:

1
2
3
4
5
6
7
8
9
10

//评测题目: throttle的简单实现
// throttle的简单实现

function throttle(func, duration) {
// 在这里编写具体实现

}

window.addEventListener('scroll', throttle(func, 50), false);

我:
第一反应是没听过这个,然后立刻网上搜相关信息,想起高程有讲过相关内容,立刻拿出红宝书出来镇场子。

throttle 和 debounce 的原理

先讲讲 throttle 的来源,俗称节流,一般用在滚动场景里,控制时间响应的次数。

高程里面讲函数节流背后的基本思想是指,某些代码不可以在没有间断的情况连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。目的是只有在执行函数的请求停止了一段时间之后才执行。

其实高程里面讲的节流原理是 debounce,实际的代码也是 debounce 的实现代码

阅读全文 »
折叠何宝莹

使用 Vue.js 写一个简单的倒计时

发表于 2018-03-24 |

背景:

商品支付完有一个支付结果页面, 这个页面需要添加一个倒计时,自动跳转到订单详情/团购详情页面.

原理:

新建一个 interval,每隔一秒更新秒数。
当秒数达到0的时候,销毁这个interval,并且跳转到指定页面,
下面是代码部分:
data 里面定义好数据:

1
2
3
countDownTime: 5,
countDownText: '页面将在5s后自动跳转',
intervalToken: -1,

然后在 js 里面写逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
mCreated: function () {
this.countdown();
},
countdown: function () {
console.log('打印倒时器', this.countDownText, this.countDownTime);
const that = this;
this.intervalToken = setInterval(() => {
console.log('打印倒时器 interval 内', this.countDownText, this.countDownTime);
if (this.countDownTime <= 1) {
// 倒计时结束后跳转的页面
this.mBack();
}
that.updateCountDownText();
}, 1000);
},
updateCountDownText: function () {
this.countDownTime = this.countDownTime - 1;
this.countDownText = `页面将在${this.countDownTime}s后自动跳转`;
},
viewdisappear: function () {
clearInterval(this.intervalToken);
},

注意在页面头部写一个 viewdisappear 事件. 在页面消失的时候销毁 setInterval, 否则页面一直进入循环

1
<div @viewdisappear="viewdisappear">

折叠何宝莹

成为女程序员

发表于 2018-03-07 |

我高考数学全校第一,但是现在除了数钱没有机会用到数学,咋整。

做前端吧~

我本专业不是计算机,但是喜欢编程,好纠结。

做前端吧~

我想升职加薪住洋楼养番狗。

做前端吧~

阅读全文 »
折叠何宝莹

你会翻转二叉搜索树吗?(JS为例)invert binary tree

发表于 2018-02-27 |

举个简单例子. 上图就是一个二叉搜索树.
实现的代码:

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
31
32
33
34
35
36
37
38
39
40
class Tree {
constructor(element=null) {
this.element = element
this.left = null
this.right = null
}

traversal() {
console.log('element is', this.element)
if (this.left !== null) {
this.left.traversal()
}
if (this.right !== null) {
this.right.traversal()
}
}
}

const testInvert = () => {
const a = new Tree('a')
const b = new Tree('b')
const c = new Tree('c')
const d = new Tree('d')
const e = new Tree('e')
const f = new Tree('f')
const g = new Tree('g')

a.left = b
a.right = c
b.left = d
b.right = e
c.left = f
c.right = g

a.traversal()
}

if (require.main === module) {
testInvert()
}

翻转后是怎样的呢?

阅读全文 »
折叠何宝莹

键盘按键的英文中文和符号换算记录

发表于 2017-12-27 |

每次都要翻墙倒柜找…干脆放上来.

control 控制键 ⌃

command 花键 ⌘
alt 键 ⌥

shift 键 ⇧

折叠何宝莹

webstorm, idea, pycharm 快捷键@mac

发表于 2017-12-25 |

让你的双手摆脱鼠标,搜集默认 mac常用快捷键,亲测可用

约定: C为Ctrl键

查找

`
查找文件: Ctrl+Cmd+O
整个项目检索: Cmd+ Shift + F

光标左右移动

`
光标向左移动一个单词: C + b 光标左(backward)
光标向右移动一个单词: C + f 光标右(forward)
光标移动到行头: C + a
光标移动到行尾: C + e
光标向上移动一行: C + p (previous)
光标向下移动一行: C + n (next)
光标往右一个单词移动: C + alt + f
光标往左一个单词移动: C + alt +b

`

复制

复制当前行: Cmd + D

删除

`
删除: delete
删除当前行: Cmd + I
删除光标左边的一个字符: C + h
删除光标右边的一个字符: C + d
删除光标左边的一个单词: C + w 或者option + delete
删除光标右边的一个单词:

删除从当前光标到行首的所有内容: Cmd+delete
删除从当前光标到行尾的所有内容: Ctrl + k

C + k 删除从当前光标到行尾的所有内容, 并且暂存起来, 用C + y 粘贴出来(yank). 和 cmd c cmd v 是两套独立的复制粘贴系统.

`

代码折叠

`
折叠代码: alt + cmd + [
展开代码: alt + cmd + ]

折叠所有代码: shift + alt + cmd + [    
展开所有代码: shift + alt + cmd + ]    

`

整行上下移动

`
向上移动一行:
向下移动一行:

`

符号间跳转

按照字符跳动:

其他选择

选中下一个与当前光标所在单词(或是与当前选中单词相同的单词): 选中当前行: 全选: Ctrl + A 将下一行接到当前行尾: 连续输入两个快捷键,将当前单词转为大写字母: 连续输入两个快捷键,将当前单词转为小写字母: 段落重排(在英文写作时比较有用):

括号和引号

可以让光标跳转到临近的括号处(对应的):Ctrl + M 可以选中当前括号内所有内容:Ctrl + Alt + M

折叠何宝莹

怎样解决 atom 快捷键冲突?( markdown-previw 的使用为例)

发表于 2017-12-11 |

Preference -> keybinding 发现emmet和markdown-preview的control-shift-m冲突,

那么可以把以下代码拷贝粘贴到 keymap.cson 文件中(在 Preference 中点击左侧第二项 Keybindings,即可打开这个文件),
随后用
⌘
s
保存之后重新启动 Atom 即可(或者在 Command Palette 里使用 Windows: Reload 命令)。

1
2
'.editor:not(.mini)':
'ctrl-shift-M': 'markdown-preview:toggle'

注:
第二行需要缩进, 否则会报错.

折叠何宝莹

一切乱码都是告白? ---如何破解凯撒密码

发表于 2017-07-27 |

什么是凯撒密码?

维基百科的定义很清楚:

在密码学中,恺撒密码(英语:Caesar cipher),或称恺撒加密、恺撒变换、变换加密,是一种最简单且最广为人知的加密技术。它是一种替换加密的技术,明文中的所有字母都在字母表上向后(或向前)按照一个固定数目进行偏移后被替换成密文。例如,当偏移量是3的时候,所有的字母A将被替换成D,B变成E,以此类推。这个加密方法是以罗马共和时期恺撒的名字命名的,当年恺撒曾用此方法与其将军们进行联系。

阅读全文 »
折叠何宝莹

写在清晨朗读会70天

发表于 2017-01-27 |

坚持做一件事70天了,养成一个非常好的习惯。刚开始十几天的时候,每天打开电脑,下载微信John读的音频,用iTunes打开,默认单曲循环,插上音响,我的一天缓缓开始。同时会把音频上传到网易云音乐,方便自己和别人收听,之前还有人感谢我、和我聊了蛮久,是个很有学习干劲的小伙伴。后来没多久John自己把音频放到线上,我就无需亲自把音频放在网上。于是,只需按两个键,我的一天就开始了。
每天都坚持listen, shadow, read三个步骤,时间多点或者心情好时这个步骤会循环反复♻️最多两三次,花了多少时间,都体现在录音效果上。有遇到过很难的材料呀,反复了四个循环才觉得读懂文章,古人说的话有道理,多读几遍其义自现。如果你看的不清楚是因为你离得不够近,如果你读不懂是因为你读的不够多。再后来我想每天都花时间在这上面,英语水平终于没那么差了,甚至有点回到大学水平,我可以考虑考证了,没想太多,只有三级口译这个选择了。
琢磨下,我可以在原来的三步基础上,加上口译interpret这一项,同传还是交传就看自己水平和材料难度了。第二天实行了,因为在路上开车,所以真实的步骤是listen, shadow, interpret, listen, shadow, interpret如此循环的,等坐下来有空时才加入read这一步。本来打算交传的,听一句翻译一句,可是车子的暂停键有延迟,所以翻译的时候没几句就结束了。我纳闷了,材料哪有那么短。后来重新听才知道这个延迟让我跳掉很多句。所以我后来就同传了,听的时候可以现在脑子里翻译一遍,自己再张嘴说。这个过程中自觉嘴巴很笨,至少比脑子笨太多,我就会对自己说:你笨啊,如果一张嘴就出文章了,还干嘛去练习。
很大的惊喜是以前读过对我影响很大的文章,John也挑到读出来了。是Steve P.写的怎样在20分钟内找到人生目标,以前读过的奶牛🐄写的中文版,并实际做了两次,效果很好。两次都为同一样而泪流不止。谢谢奶牛、谢谢Steve、谢谢John、谢谢新生大学。

折叠何宝莹

低流动投资

发表于 2017-01-27 |

先贴一张图,过去11年中国各类资产的走势。(2005.1~2016.5)
[http://ww2.sinaimg.cn/large/65e4f1e6gw1f80558al6fj20ms0bntbv.jpg]
没想到,以中证全指净收益指数为代表的股票是所有大类资产中回报最高的品种,排名第二是一线城市房地产。有人会得出结论:杀入股市。科科,请问看股票的收益曲线,大起大落,如果07年入场,到现在还没赚钱呢。与此相比,全国房地产的曲线一只缓和上升,一线城市房地产的回报让很多人乐开颜。即便有炒股能力,有择时能力,还是建议投资一线城市房地产,只有北上深,才有房地产,记住这句话。为什么呢?05年有股民买股票,但有多少人全仓,又有多少人加杠杆,更进一步,又有多少人一直持有直到07年或者去年15年五月卖出?你并不会,基弧所有股民都不会。但是05年在上海、在北京、在深圳买房的人,大部分会全仓投入,并且加杆杠,更重要的是一直持有。这,是财富的来源。每年5%平稳的涨幅在全仓杆杠放大下,投资一线房产收益非常可观。
既然提到低流动,不得不说一下财务上一个很重要的常识:资产的三性——流动性、收益性、安全性。不同的投资资产的三性特征不同,不能面面俱到,不得不放弃其中一个,你会放弃哪个呢?well,必须是流动性。一线城市房产就是这样的资产,无需全额付清,外加30年分期付款,试问买哪样东西有这样的特权呢?

123
何宝莹

何宝莹

攀高峰

25 日志
GitHub Email
© 2016 - 2020 何宝莹
由 Hexo 强力驱动
主题 - NexT.Pisces