标签:arguments else now() auto item call type mouse 定时器
防抖(debounce
):所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
防抖在于控制次数,节流在于控制频率!
<!DOCTYPE html> <body> <div id="content"></div> </body> <style> #content { width: 500px; height: 200px; display: flex; align-items: center; justify-content: center; background-color: #ccc; margin: 200px auto; font-size: 28px; } </style> <script> let num = 1; let content = document.getElementById("content") function count() { content.innerHTML = num++; } //防抖 immediate true 表立即执行,false 表非立即执行 function debounce(fn, wait, immediate) { let timer; return function () { let _self = this; let args = arguments; if (timer) clearTimeout(timer); if (immediate) { let callNow = !timer; timer = setTimeout(() => { timer = null; }, wait); if (callNow) fn.apply(_self, args) } else { timer = setTimeout(() => { fn.apply(_self, args) }, wait) } } } //节流 type为1是时间戳比较 type为2是定时器 function throttle(fn, wait, type) { if (type == 1) { var c = 0; } else { var timer; } return function () { let _self = this; let args = arguments; if (type == 1) { let now = Date.now(); if (now - c > wait) { fn.apply(_self, args) c = now; } } else { if (!timer) { timer = setTimeout(() => { timer = null; fn.apply(_self, args) }, wait) } } } } content.onmousemove = throttle(count, 1000, 2) </script>
标签:arguments else now() auto item call type mouse 定时器
原文地址:https://www.cnblogs.com/returnvalue/p/12894892.html