js代码如下：
let num = 1
function count () {
document.getElementById('data').innerHTML = num
num ++
}
function debounce (fn, delay) {
let timer = void 0;
//参数就是调用debounce函数的那个函数所拥有的的参数，也就是下面的countFn的参数
return function (...args){
if(timer) clearTimeout(timer)
timer = setTimeout(() =>{
fn(...args) //等价于fn.bind(this,args)
},delay)
}
}
let countFn = debounce(count, 1000)
document.getElementById('app').onmousemove= countFn
1.6 防抖函数的应用
实现输入框搜索功能，当我们要搜索一个关键词时，如果连续输入会一直触发防抖，只有在停止输入后，才会触发搜索事件，代码如下：
html代码如下：
js代码如下：
function debounce (fn, delay) {
let timer = void 0;
return function (...args){
if(timer) clearTimeout(timer)
timer = setTimeout(() =>{
fn(...args)
},delay)
}
}
let search = function (content) {
let c = content || ''
document.getElementById('content').innerHTML = c
}
let searchFn = debounce(search, 2000)
document.getElementsByTagName('input')[0].addEventListener('keyup',(e) => {
searchFn(e.target.value)
})
2. 函数节流
2.1 函数节流定义
当持续触发事件时，保证一定时间段内只调用一次事件处理函数
2.2 函数节流与防抖的区别：
函数防抖是指一定时间触发一次函数，但是在这个时间内如果再次触发事件，则这个时间重新计算，直到这段时间内没有再次触发事件时才会执行函数。
函数节流是指一定时间内不管触发多少次事件，都是有规律的一段时间执行一次函数
2.3 函数节流函数
节流和防抖的函数高度类似，只是flag控制略有不同
let throttle = function(fn, delay){
let flag = true
return function(...args){
if(!flag){return}
flag = false
setTimeout(function(){
fn(...args)
flag = true
},delay)
}
}
2.4 举个例子
还是和防抖函数的例子一样
html代码：
js代码如下：
let num = 1
let count = function(){
document.getElementById('data').innerHTML = num
num ++ ;
}
let throttle = function(fn, delay){
let flag = true
return function(...args){
if(!flag){return}
flag = false
setTimeout(function(){
fn(...args)
flag = true
},delay)
}
}
document.getElementById('app').onmousemove=throttle(count, 1000)
