防抖的使用场景:
将一段时间内连续的多次触发转化为一次触发。
例如:一般可以使用在用户输入停止一段时间过后再去获取数据,而不是每次输入都去获取
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
<title>debounce</title>
<style>
#container{
width: 100%; height: 200px; line-height: 200px; text-align: center; color: #fff; background-color: #444; font-size: 30px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="cancel">取消</div>
<script>
//防抖的原理:你尽管出发事件,但是我一点要在出发n秒之后才实行
// 如果你在一个事件触发n秒内又触发,那就以新的事件为准
//总之需要等到n秒内不再出发事件,我再实行
var count = 1;
var container = document.getElementById('container&