函数节流与函数去抖大幅度的减少计算机运行的资源
函数去抖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>搜索 <input type="text" id="ipt"></p>
<ul id="search-list">
<li>你好</li>
</ul>
<script src="./utils.js"></script>
<script>
// 现在咱家没钱,啥时候有钱啥时候吃;
// 无论执行多少次,我都只关注最后一次,最后一次执行结束之后100ms ,我们再去执行对应的程序;
var t = null;
_("#ipt").oninput = function(){
clearTimeout(t);
t = setTimeout(function(){
var value = this.value;
// 每100ms毫秒只能执行一次;
var data = {
wd : value
}
// console.log("重要程序");
jsonp("https://www.baidu.com/sugrec" , function(res){
renderSearch(res);
} , "cb" , assign({
prod : "pc",
sugsid : "1423,31169,21125,30839,31187,30823,22159",
}, data));
}.bind(this),500)
}
function renderSearch(res){
var search_list = res.g;
var html = "";
if( search_list === undefined ){
return _("#search-list").innerHTML = html;
}
search_list.forEach( function( item ){
html += "<li>"+ item.q +"</li>"
})
_("#search-list").innerHTML = html;
}
</script>
</body>
</html>
函数节流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>搜索 <input type="text" id="ipt"></p>
<ul id="search-list">
<li>你好</li>
</ul>
<script src="./utils.js"></script>
<script>
//函数节流
var t = null;
_("#ipt").oninput = function(){
var value = this.value;
// console.log(value);
if( typeof t === "number" ){
return false;
}
// 每100ms毫秒只能执行一次;
var data = {
wd : value
}
t = setTimeout( function(){
t = null;
jsonp("https://www.baidu.com/sugrec" , function(res){
renderSearch(res);
} , "cb" , assign({
prod : "pc",
sugsid : "1423,31169,21125,30839,31187,30823,22159",
}, data));
} , 100)
}
function renderSearch(res){
var search_list = res.g;
var html = "";
if( search_list === undefined ){
return _("#search-list").innerHTML = html;
}
search_list.forEach( function( item ){
html += "<li>"+ item.q +"</li>"
})
_("#search-list").innerHTML = html;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 函数节流
function throttle( callback , delay ){
delay = delay || 100;
// 返回一个新函数,新函数英语回调函数的电泳
var t = null;
return function(){
if( typeof t === "number" ){
return false;
}
//需要外部函数的参数
//类似于bind的封装
var _arguments = arguments;
t = setTimeout( function(){
t = null;
callback.apply( false , _arguments );
} , delay )
}
}
function shaking( callback , delay ){
delay = delay || 100;
// 返回一个新函数,新函数用于回调函数的调用
var t = null;
return function(){
clearTimeout(t);
//需要外部函数的参数
//类似于 bind 的封装
var _arguments = arguments;
t = setTimeout(function(){
t = null;
callback.apply( false , _arguments );
} , delay )
}
}
// 函数节流
// var handerMove = throttle(function( e ){
// console.log( e );
// })
// 函数去抖
// var handerMove = shaking(function( e ){
// console.log( e );
// })
//运行函数
document.onmousemove = handerMove;
</script>
</body>
</html>