JS函数防抖

最新推荐文章于 2024-04-01 19:36:13 发布

huyao_road

最新推荐文章于 2024-04-01 19:36:13 发布

阅读量246

点赞数

分类专栏： JS小技巧

本文链接：https://blog.csdn.net/qq_37746973/article/details/80571700

版权

JS小技巧专栏收录该内容

28 篇文章 0 订阅

订阅专栏

函数防抖就是在函数需要频繁触发的情况下，只有足够的空闲时间，才执行一次。好像公交司机会等人都上车后才出站一样。

应用场景：

实时搜索
拖拽

当输完nba之后人会稍微有所停顿，在停顿时才刷新页面

实现代码

function debounce(handler, delay){
	delay = delay || 300;
	var timer = null;
	return function() {
		var _self = this,
			_args = arguments;
		clearInterval(timer);
		timer = setTimeout(function(){
			handler.apply(_self, _args);
		}, delay);
	}
}

测试用例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test</title>
</head>
<body>
	<input type="text" id="inp">
<script type="text/javascript">
/**
 * 防抖
 */
var oInp = document.getElementById('inp');
function ajax(e) {
	console.log(e, this.value)
}

function debounce(handler, delay){
	delay = delay || 300;
	var timer = null;

	return function() {
		var _self = this,
			_args = arguments;
		clearInterval(timer);
		timer = setTimeout(function(){
			handler.apply(_self, _args);
		}, delay);
	}
}

oInp.oninput = debounce(ajax, 500);

</script>
</body>
</html>

huyao_road

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS函数防抖

函数防抖就是在函数需要频繁触发的情况下，只有足够的空闲时间，才执行一次。好像公交司机会等人都上车后才出站一样。应用场景：实时搜索拖拽当输完nba之后人会稍微有所停顿，在停顿时才刷新页面实现代码function debounce(handler, delay){ delay = delay || 300; var timer = null; return function() { var...
复制链接

扫一扫