優化網絡性能之節流與防抖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>節流和防抖</title>
</head>
<body>
<div id="show">
0
</div>
<button class="btn">搶東西</button>
<input type="text" id="inp">
<script>
var oDiv = document.getElementById('show');
var oButton = document.getElementsByClassName('btn')[0];
// 節流 1 1000 2 1000 3
function throttle(handler, wait) {
var lastTime = 0;
return function(e){
var nowTime = new Date().getTime();
if(nowTime - lastTime > wait){
// this oBtn
// event
handler.apply(this,arguments);
lastTime = nowTime;
}
}
}
function buy(e) {
console.log(this,e);
oDiv.innerText = parseInt(oDiv.innerText) + 1;
}
oButton.onclick = throttle(buy,1000);
// 實時搜索
var oInp = document.getElementById('inp');
var timer = null;
function debonunce(handler , delay){
var timer = null;
return function(e){
var self = this;
var arg = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
handler.apply(self,arg);
},delay)
}
}
function ajax(e){
console.log(e,this.value);
}
oInp.oninput = debonunce(ajax , 1000);
// oInp.oninput = function(e){
// var _self = this;
// var _arg = arguments;
// clearInterval(timer);
// timer = setTimeout(function(){
// ajax.apply(_self,_arg);
// },1000)
// }
</script>
</body>
</html>
柯里化函數 類似於ajax鏈式調用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<title>柯里化</title>
</head>
<body>
<script>
// fixed parmas4
function add(a, b, c, d) {
// add.length == 4 true
// console.log(add.length); 4
return a + b + c + d;
}
// curry 柯里化
function FixedParmasCurry(fn) {
// [add,1,2]
var _arg = [].slice.call(arguments, 1);
return function () {
// arguments [2,3]
// [1,2,2,3]
var arg = _arg.concat([].slice.call(arguments, 0));
return fn.apply(this, arg);
}
}
// var newAdd = FixedParmasCurry(add, 1, 2);
// console.log(newAdd(2, 3));// 8
// look forward to Parms 湊齊參數
function Curry(fn, length){
// length 4
var length = length || fn.length;
return function (){
if(arguments.length < length){
// [fn].concat([1]) [fn,1];
var combined = [fn].concat([].slice.call(arguments,0));
return Curry(FixedParmasCurry.apply(this,combined),length - arguments.length);
// 必須固定參數
}else{
return fn.apply(this,arguments);
}
}
}
var newAdd = Curry(add);
console.log(newAdd(1)(2)(3)(4)) // 10
// 應用柯里化 實現了函數的累積極大消除了函數調用的重複 例如
// var nA1 = newAdd(1); // 返回函數已經累加一次（1）
// var nA11 = nA1(2); // 返回函數已經累加2次 （1,2）
// var nA22 = nA11(2); // 返回函數爲（1,2,2）還需要再傳一個
// var result = nA22(4); // 返回數值（1,2,2,4）
// console.log(result); // 9
// console.log(nA11(3,4)); // 10
// newAdd(1, 2, 3, 4);
// newAdd(1)(2, 3)(4);
// newAdd(1, 2)(3, 4);
// newAdd(1)(2)(3)(4);
// 第二個例子ajax
// POST www.test1.com 'name=cst&code = 111';
// POST www.test1.com 'key = 22;
// POST www.test2.com 'name=cst&code = 111';
// POST www.test2.com 'key = 11';
function ajax (method,url,data){
console.log(method,url,data);
}
// ajax('POST', 'www.test1.com', 'name=cst&code = 111')
// ajax('POST', 'www.test1.com', 'key = 11')
// ajax('POST', 'www.test2.com', 'name=cst&code = 111')
// ajax('POST', 'www.test2.com', 'key = 22')
var ajaxCurry = Curry(ajax);
var PostAjax = ajaxCurry('POST');
var Test1Ajax = ajaxCurry('POST')('www.test1.com')
Test1Ajax('name=cst&code = 111');
Test1Ajax('key = 11');// ajax('POST', 'www.test1.com', 'name=cst&code = 111')
var Test2Ajax = PostAjax('www.test2.com'); // ajax('POST', 'www.test2.com', 'name=cst&code = 111')
Test2Ajax('name = cst&code = 111');// ajax('POST', 'www.test2.com', 'name=cst&code = 111')
Test2Ajax('key = 22')// ajax('POST', 'www.test2.com', 'key = 22')
</script>
</body>
</html>