Skip to content

Instantly share code, notes, and snippets.

Janking Janking

Block or report user

Report or block Janking

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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){
You can’t perform that action at this time.