HTML 代码
<div class="app">
<input type="text" id="inppp" />没有节流防抖的input
<input type="text" id="debounceid" /> 防抖的input
<input type="text" id="throttleid" /> 节流的input
</div>
<script>
var inppp = document.getElementById("inppp")
var debounceid = document.getElementById("debounceid")
var throttleid = document.getElementById("throttleid")
// 监听原始事件, 无防抖,节流
inppp.addEventListener('keyup', function (e) {
ajax(e.target.value)
})
debounceid.addEventListener('keyup', function (e) {
bebounded(e.target.value)
})
throttleid.addEventListener('keyup', function (e) {
throttled(e.target.value)
})
let bebounded = debounce(ajax, 500)
let throttled = throttle(ajax, 1000)
// 定义回调函数
function ajax(content) {
console.log('ajax request' + content)
}
</script>
JS代码:JS文件需要单独引用----------------------- 节流throttle 定时器和时间戳模式二选一
// 简单实现过程!
function debounce(fn, delay) {
// 定义定时器
let timer
return function (args) {
let that = this
clearTimeout(timer)
timer = setTimeout(() => {
fn.call(that, args)
}, delay)
}
}
// 时间戳模式
function throttle(fn, delay) {
// 定义时间戳
let previous = 0
return function (arg) {
var that = this
// 将时间变为number
let newDate = +new Date()
if (newDate - previous > delay) {
fn.call(that, arg)
previous = newDate
}
}
}
// 定时器模式
function throttle(fn, delay) {
let timer
return function (arg) {
var that = this
if (!timer) {
timer = setTimeout(() => {
timer = null
fn.call(that, arg)
}, delay)
}
}
}