JavaScript的防抖函数

函数的执行是十分快的，在上一个函数还没有在定时器中被执行完前，下一个函数就曾经开始了执行，就导致了上一个定时器工作被革除了。

// 防抖（debounce） 在肯定工夫内只能执行最初一次函数调用function debounce(fn, delay) {  let timeout = null // 初始化一个定时器  return function(...args) {    // 当曾经存在一个定时器的时候，就勾销掉，就相似于勾销了上一次的setTimeout函数    if(timeout) clearTimeout(timeout)     // 当没有定时器或者上一个定时器曾经被勾销后，就开始新的定时器    timeout = setTimeout(() => {      fn(...args)    }, delay)  }}const debounceFn = debounce((a,b)=>console.log(a+b), 2000)debounceFn(1,2) //canceleddebounceFn(2,3) //canceled debounceFn(3,4) //canceled debounceFn(4,5) //canceleddebounceFn(5,6) // 11

JavaScript的节流函数

// 节流函数（throttle）在delay工夫内只会执行一次传入的函数function throttle(fn, delay) {  let status = true // 定义一个状态值，初始化为true  return function(...args) {    if(!status) return // 当初始化值为true时，阐明有函数在被执行中    status = false // 状态值设为false，避免其余函数进行执行    setTimeout(() => {      fn(...args)      status = true // 函数执行完之后，状态值从新设置为true，这个时候下一个函数能够进行执行操作    }, delay)  }}const throttleFn = throttle((a,b)=>console.log(a+b), 2000)throttleFn(1,2) // 3throttleFn(1,2) // canceledthrottleFn(1,2) // canceledthrottleFn(1,2) // canceledthrottleFn(1,2) // canceled