<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>防抖函数</title> </head> <body> <script> // function debounce(func, delay, immediate) { // let time; // return function () { // let context = this; // let args = arguments; // clearTimeout(time); // if (immediate) { // let callNow = !time; // time = setTimeout(() => { // time = null; // }, delay); // if (callNow) { // func.apply(context, args); // } // } else { // time = setTimeout(function () { // func.apply(context, args); // }, delay); // } // }; // } function debounce(func, delay, immediate) { let timer, result; let debounced = function () { let context = this; let args = arguments; if (timer) { clearTimeout(timer); } if (immediate) { let isExecute = !timer; timer = setTimeout(() => { timer = null; }, delay); if (isExecute) { result = func.apply(context, args); } } else { timer = setTimeout(function () { func.apply(context, args); }, delay); } return result; }; debounced.cancel = function () { clearTimeout(timer); timer = null; }; return debounced; } let count = 0; let container = document.getElementById('#container'); let btn = document.querySelector('#btn'); function doSomeThing(e) { console.log(e); console.log(this); container.innerHTML = count++; return '想要的结果'; } container.onmouseover = debounce(doSomeThing, 1000); let doSome = debounce(doSomeThing, 1000); btn.click = function () { doSome.cancel(); }; let a = `scroll事件滚动触发；搜索框输入查询；表单验证；按钮的提交事件；浏览器的窗口缩放；`; let b = `事件响应函数在一段时间后才执行，如果在这段时间内再次调用，则重新计算执行时间；当预定的时间内 没有再次调用，则执行相应逻辑；`; </script> </body> </html>