防抖和节流

1. 防抖

先看一段代码

1. 定义延时器
let timer = null

function debounceSearch(kw) {
	timer = setTimeout(() => {
		getSuggestList(kw)
	}, 500)};
}

// 1. 为输入框绑定 keyup 事件
$('#ipt').on('keyup', function() {
    clearTimeout(timer)
    let keywords = $('#ipt').val().trim()
    debounceSearch(keywords)
})

在搜索的时候，向服务器发起请求得到搜索建议列表的时候，我们希望当输入完关键字才向服务器发起请求，于是我们定义了一个延时器，每当输入一个字符时，就清空定时器，再触发定时器

2. 节流

var timer = null

$(document).on('mousemove', function(e) {
    // 判断节流阀是否为空
    if (timer) {
        return
    }
    // 开启延时器
    timer = setTimeout(function() {
        $(angel).css('top', e.pageY + 'px').css('left', e.pageX + 'px')
        console.log('ok')
        timer = null
    }, 16)
})

节流应用于轮播图的时候，比如我们快速点击切换图片的按钮，我们希望图片能有一个延时效果再切换，并且在这个延时期间，不允许再开启延时器，我们就会通过节流阀来判断