Skip to content

Instantly share code, notes, and snippets.

View Janking's full-sized avatar

Janking Janking

View GitHub Profile
@Janking
Janking / command.html
Last active June 15, 2017 15:03
javascript命令模式案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="replay">播放录像</button>
@Janking
Janking / gist:65b129cb7805037fae2f
Last active October 10, 2015 06:59
throttle.md

Underscore.js是一个很精干的库,压缩后只有5.2KB。它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程。

本文仅探讨Underscore.js的两个函数方法 _.throttle_.debounce 的原理、效果和用途。

通常的函数(或方法)调用过程分为三个部分:请求、执行和响应。(文中“请求”与“调用”同义,“响应”与“返回”同义,为了更好的表述,刻意采用请求和响应的说法。)

某些场景下,比如响应鼠标移动或者窗口大小调整的事件,触发频率比较高。若稍处理函数微复杂,需要较多的运算执行时间,响应速度跟不上触发频率,往往会出现延迟,导致假死或者卡顿感。

在运算资源不够的时候,最直观的解决办法就是升级硬件,诚然通过购买更好的硬件可以解决部分问题,但是也需要为此付出高额的成本。特别是客户端和服务器模式,要求客户端统一升级硬件基本不可能。

在资源有限的前提下,处理函数无法即时响应高频调用。退而求其次,只响应部分请求是否可行呢?某些场景下的密集性请求,具备很强的同质和连续性。比如说,鼠标移动的轨迹参数。响应越及时效果越平滑,但是如果响应速度跟不上时,反而会出现卡顿感,如果适当的丢弃一些请求效果更流畅。

throttledebounce 是解决请求和响应速度不匹配问题的两个方案。二者的差异在于选择不同的策略。

电梯超时

想象每天上班大厦底下的电梯。把电梯完成一次运送,类比为一次函数的执行和响应。假设电梯有两种运行策略 throttledebounce ,超时设定为15秒,不考虑容量限制。

var el = document.getElementById("editable"); // 获取编辑器元素
var range = document.createRange(); // 创建 range 对象
var sel = window.getSelection(); // 创建 selection 对象
range.setStart(el.childNodes[2], 5); // 设置光标位置
range.collapse(true); // 折叠(闭合)range的端
sel.removeAllRanges(); // 清空 selection 对象中的所有 range
sel.addRange(range); // 插入光标的range
el.focus();
// 具体思路:先定义好光标位置,并为光标创建一个range对象,然后插入到selection对象中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="replay">播放录像</button>