“如何稀释scroll事件”的思考(不小心写了个异步do...while)
看了下园友的一帖子：http://www.cnblogs.com/xzhang/p/4145697.html#commentform
本来以为是很简单的问题，但仔细想想还挺有意思的。简单的说就是增加事件触发的间隔时间。
比如在浏览器的事件是1毫秒调用一次，转换成100毫秒调用一次。
看了下原贴的两方法，觉得可以乐观锁的方法再写个，虽然最后对比结果和typeahead差不多。但过程还是挺有意思的，分享下思路
首先，浏览器事件间隔是没法改变的。所以我们只能改变回调函数的执行间隔。
乐观锁机制的流程是：
do {
var _oldVal = _nowVal//记录基准值
//执行任务
} while (_oldVal != _nowVal)//比较 检查_nowVlau是否在执行任务的时候发生变化
根据这个结构，基本的设计思路就是：
触发事件时启动一个“任务线程”，执行完指定的任务后，隔一段时间去检查没有没有发生后续事件（通过_oldVal与_nowVal判断），如果有重新执行任务，没有结束线程。
但有一个问题，“任务线程”同一时间只能执行一个，所以在触发事件的时候要做下判断。修改后的程序
var _taskRun = false, _nowVal = 0, _oldVal = 0;
function eventFun() {
if (_taskRun) {
_nowVal++;
}
else {
_taskRun = true;
do {
var _oldVal = _nowVal//记录基准值
//执行任务
} while (_oldVal != _nowVal)//比较 检查_nowVlau是否在执行任务的时候发生变化
_taskRun = false;//执行结束重置状态变量
_nowVal = 0;
}
}
一切很顺利，但是要有间隔啊！js里可没有Thread.sleep,但有setTimeout，所以可以用setTimeout模拟sleep
SO,Think.....了一会，不小心写了个异步do...while
var _taskRun = false, _nowVal = 0, _oldVal = 0, _time = 100;
var _do = function (waitTime, funTsk) {//模拟do{}while(true);
var _endInner, _whileInner;
_whileInner = function (funcondition) {
_endInner = function (funEnd) {
var _funWhile = function () {
if (funcondition()) {
_endInner(funEnd);
} else {
funEnd();
}
};
var _runInner = function () {
funTsk();
setTimeout(_funWhile, waitTime);//延迟一段时间做判断
};
_runInner();
};
return {
"end": _endInner
};
};
return { "while": _whileInner };
};
function eventFun() {
if (_taskRun) {
_nowVal++;
}
else {
_taskRun = true;
_do(
100,//间隔时间
function () {
_oldVal = _nowVal//记录基准值
console.log(_oldVal);
}
)
.while(
function () {
return _oldVal != _nowVal
}
)
.end(
function () {
_taskRun = false;//执行结束重置状态变量
_nowVal = 0;
}
);
}
}
现在，基本OK了，但做了下测试，发觉间隔时间没有typeahead的准，怎么回事？
研究了下他的代码。发现高手的思路就不不一样。原来他是用当前时间去计算setTimeout的调用间隔的。SO出来的结果更加准确。
比如，设置间隔100秒，一个事件在距上个事件50秒的时候发生，为了保证每次100秒的间隔，这个事件的setTimeOut时间就应该设置成50秒而不是100秒
根据这个思路再修改了下代码，给出完整版：
var _asynFun = function (func, wait) {
var context, args, result, _taskRun = false, _nowVal = 0, _oldVal = 0;
var _do = function (waitTime, funTsk) {//模拟do{}while(true);
var _endInner, _whileInner;
_whileInner = function (funcondition) {
_endInner = function (funEnd) {
var _funWhile = function () {
if (funcondition()) {
_endInner(funEnd);
} else {
funEnd();
}
};
var _runInner = function () {
var _previous = new Date();
result = funTsk.apply(context, args);
var _remaining = waitTime - ((new Date()) - _previous);
setTimeout(_funWhile, _remaining);//延迟一段时间做判断
};
_runInner();
};
return {
"end": _endInner
};
};
return { "while": _whileInner };
};
return function () {
context = this;
args = arguments;
if (_taskRun) {
_nowVal++;
}
else {
_taskRun = true;
_do(
wait,//间隔时间
function () {
_oldVal = _nowVal//记录基准值
func();
}
)
.while(
function () {
return _oldVal != _nowVal
}
)
.end(
function () {
_taskRun = false;//执行结束重置状态变量
_nowVal = 0;
}
);
}
return result;
}
}
本文版权归作者和博客园共有，未经作者本人同意禁止任何形式的转载，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。
最后再贴出测试代码：
<html>
<head>
<title>
“如何稀释scroll事件”测试
</title>
<meta charset="utf-8">
</head>
<body>
<div style="margin:auto;width:600px;padding:20px">
<input id="waitTime" type="text" value="100" onchange="onscrollTest()" style="float:left" />
<select id="sel" onchange="onscrollTest()" style="float:left">
<option value="1">使用_lazyRun</option>
<option value="2">使用debounce</option>
<option value="3">使用throttle </option>
<option value="4">使用_asynFun </option>
</select>
<div id="outDiv" style="float:left"></div>
</div>
<div style="width:auto;text-align:right;font-weight:bold;color:red;padding:10px;font-size:20px">滚动条----------------------------------------------></div>
<div id="box" style="width:auto; height:200px;overflow-y:scroll;">
<div style="border-color:goldenrod;border: 2px solid #f60;height:6000px;width:auto;background-color:goldenrod"></div>
</div>
</body>
</html>
<script type="text/javascript">
var _lazyRun = function (func, wait) {
var _preIndex = 0, _nowIndex = 1, _timer, _fnCur, _context, _result;
var _fn1 = function () {
if (_preIndex < _nowIndex) {
var _previous = new Date();
_fnCur = _fn2;
clearTimeout(_timer);
_preIndex = _nowIndex;
_result = func.apply(_context, _args);
var _remaining = wait - ((new Date()) - _previous);
if (_remaining < 0) {
_result = _fn1.apply(_context, _args);
} else {
_timer = setTimeout(_fn1, _remaining);//脱离线程
}
} else {
_fnCur = _fn1;
_preIndex = 0, _nowIndex = 1;
}
return _result;
};
var _fn2 = function () {
_nowIndex++;
return _result;
};
_fnCur = _fn1;
return function () {
_context = this;
_args = arguments;
_result = _fnCur.apply(_context, _args);
return _result;
};
};
//**************************underscore.js 的 debounce
/**
* [debounce description]
* @param {[type]} func [回调函数]
* @param {[type]} wait [等待时长]
* @param {[type]} immediate [是否立即执行]
* @return {[type]} [description]
*/
var _ = {};
_.debounce = function (func, wait, immediate) {
var timeout, args, context, timestamp, result;
var later = function () {
var last = _.now() - timestamp;
//小于wait时间，继续延迟wait-last执行later，知道last >= wait才执行func
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
};
return function () {
context = this;
args = arguments;
timestamp = _.now();
//是否立即执行
var callNow = immediate && !timeout;
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
};
_.now = Date.now || function () {
return new Date().getTime();
};
//**************************typeahead.js 的 throttle
var throttle = function (func, wait) {
var context, args, timeout, result, previous, later;
previous = 0;
later = function () {
previous = new Date();
timeout = null;
result = func.apply(context, args);
};
return function () {
var now = new Date(),
remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0) { //如果大于间隔时间（wait）
clearTimeout(timeout);
timeout = null;
previous = now;
result = func.apply(context, args);
} else if (!timeout) { //小于，延时调用later
timeout = setTimeout(later, remaining);
}
return result;
};
};
///导步do{}while
var _asynFun = function (func, wait) {
var context, args, result, _taskRun = false, _nowVal = 0, _oldVal = 0;
var _do = function (waitTime, funTsk) {//模拟do{}while(condition);
var _endInner, _whileInner;
_whileInner = function (funcondition) {
_endInner = function (funEnd) {
var _funWhile = function () {
if (funcondition()) {
_endInner(funEnd);
} else {
funEnd();
}
};
var _runInner = function () {
var _previous = new Date();
result = funTsk.apply(context, args);
var _remaining = waitTime - ((new Date()) - _previous);
setTimeout(_funWhile, _remaining);//延迟一段时间做判断
};
_runInner();
};
return {
"end": _endInner
};
};
return { "while": _whileInner };
};
return function () {
context = this;
args = arguments;
if (_taskRun) {
_nowVal++;
}
else {
_taskRun = true;
_do(
wait,//间隔时间
function () {
_oldVal = _nowVal//记录基准值
func();
}
)
.while(
function () {
return _oldVal != _nowVal
}
)
.end(
function () {
_taskRun = false;//执行结束重置状态变量
_nowVal = 0;
}
);
}
return result;
}
}
//**************************测试***********************************
var _testCount = 0;
var _test = function () {
console.log(_.now())
_testCount++;
//console.log(window.scrollY || document.documentElement.scrollTop);
};
function onscrollTest() {
_testCount = 0;
var _waitTime = document.getElementById("waitTime").value;
$box = document.getElementById("box");
switch (document.getElementById("sel").value) {
case "1"://_lazyRun
document.getElementById("outDiv").innerText = "use _lazyRun function ,wait time is " + _waitTime;
$box.onscroll = _lazyRun(_test, _waitTime);
break;
case "2"://debounce
document.getElementById("outDiv").innerText = "use debounce function ,wait time is " + _waitTime;
$box.onscroll = _.debounce(_test, _waitTime);
break;
case "3"://throttle
document.getElementById("outDiv").innerText = "use throttle function ,wait time is " + _waitTime;
$box.onscroll = throttle(_test, _waitTime);
break;
case "4"://throttle
document.getElementById("outDiv").innerText = "use _asynFun function ,wait time is " + _waitTime;
$box.onscroll = _asynFun(_test, _waitTime);
break;
};
console.clear();
}
onscrollTest();
</script>