Javascript写的防抖和节流函数

2022/1/27 20:34:21

本文主要是介绍Javascript写的防抖和节流函数,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1、防抖

function debounce(fn, delay) {
 // 声明一个变量timer---定时器
 let timer
 return function (…args) {
 if (timer) {
 clearTimeout(timer)
 }
 timer = setTimeout(() => {
 fn.apply(this, args)
 }, delay)
 }
}
// test
function task() {
 console.log(‘run task’)
}
const debounceTask = debounce(task, 1000)
window.addEventListener(‘scroll’, debounceTask)

2、节流

function throttle(fn, delay) {
 // 最后触发时间
 let last = 0 // Last trigger time
 return (…args) => {
 // 获取当前时间
 const now = Date.now()
 // 如果当前时间减去最后触发时间大于延迟的时间
 if (now-last> delay) {
 last = now
 fn.apply(this, args)
 }
 }
}
// test
function task() {
 console.log(‘run task’)
}
const throttleTask = throttle(task, 1000)
window.addEventListener(‘scroll’, throttleTask)



这篇关于Javascript写的防抖和节流函数的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程