Skip to content

Instantly share code, notes, and snippets.

Avatar

Janking Janking

View GitHub Profile
View gist:e69bad1489a2f1c61cb5b07045b78197
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="replay">播放录像</button>
View contentable 插入内容
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对象中。
View gist:65b129cb7805037fae2f

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

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

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

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

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

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

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

电梯超时

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

@Janking
Janking / command.html
Last active Jun 15, 2017
javascript命令模式案例
View command.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="replay">播放录像</button>
View proxy.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var arr = [
'http://e.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7ef023c23e9fffaaf51f2de66e3.jpg',
'http://b.hiphotos.baidu.com/image/pic/item/c83d70cf3bc79f3df9df6fffb8a1cd11738b29c6.jpg',
@Janking
Janking / index.html
Created Jun 1, 2015
pubsub模式-【典型版】
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
@Janking
Janking / file.md
Last active Aug 29, 2015
Four Ways To Do Pub/Sub With jQuery
View file.md

#Four Ways To Do Pub/Sub With jQuery and jQuery UI (in the future)

Between jQuery 1.7 and some of work going into future versions of jQuery UI, there are a ton of hot new ways for you to get your publish/subscribe on. Here are just four of them, three of which are new.

(PS: If you're unfamiliar with pub/sub, read the guide to it that Julian Aubourg and I wrote here http://msdn.microsoft.com/en-us/scriptjunkie/hh201955.aspx)

##Option 1: Using jQuery 1.7's $.Callbacks() feature:

$.Callbacks are a multi-purpose callbacks list object which can be used as a base layer to build new functionality including simple publish/subscribe systems. We haven't yet released the API documentation for this feature just yet, but for more information on it (including lots of examples), see my post on $.Callbacks() here:

View gist:4e9695b566144e5db93b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="" id="form">
@Janking
Janking / cacheProxy.js
Last active Dec 4, 2015
缓存代理模式
View cacheProxy.js
var mult = function() {
console.log('开始计算乘积:');
var a = 1;
for (var i = 0, l = arguments.length; i < l; i++) {
a = a * arguments[i];
}
return a;
}
var sum = function(a,b){
View gist:5c9997fbf334e1b09103
//传统单例模式
var Singleton = function(name){
this.name = name;
this.instance = null;
}
Single.prototype.getName = function(){
console.log(this.name);
};
Singleton.getInstance = function(name){