HTML面试题节流手写_html面试题节流throttle手写【零基础】-html教程-PHP中文网

内联事件如oninput="throttle(fn,300)()"无效，因每次触发重建闭包导致状态丢失、this错乱、参数断裂且无法清除定时器；必须用addeventlistener绑定以维持闭包状态。

html面试题节流手写_html面试题节流throttle手写【零基础】

直接在 HTML 标签里写 onclick="throttle(fn, 300)()" 是无效的，也过不了面试 —— 因为它既不能维持状态，又会丢失 this 和参数，更无法清除定时器或比对时间戳。

HTML 内联事件属性（比如 oninput、onclick）本质是字符串求值，每次触发都重新执行一遍字符串，相当于每次都新建一个闭包，上一次的 timer 或 pre 变量完全不可见。

你写的 throttle 函数返回的是一个新函数，但内联写法把它当“立即执行”用了，比如 throttle(fn,200)()，等于没绑定，只执行一次就丢弃
this 指向 window（非严格模式）或 undefined（严格模式），不是目标元素
arguments 不可用，传参逻辑断裂；浏览器控制台大概率报 ReferenceError: throttle is not defined
即使把 throttle 挂到 window 上，也无法解决状态丢失问题 —— 定时器 ID 找不回，clearTimeout 失效，节流就退化成普通调用

只有通过 addEventListener，才能让闭包里的 timer 或时间戳变量跨多次事件持续存在。面试官看的不是你能不能写出函数体，而是你是否理解「状态维持」这个关键点。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

正确姿势：inputEl.addEventListener('input', throttle(handleInput, 500))
错误姿势：<input oninput="throttle(handleInput, 500)()">
滚动/拖拽等高频场景，记得加 { passive: true } 提升性能，比如 window.addEventListener('scroll', throttledScroll, { passive: true })
如果要用 oninput 属性，只能赋值为一个已定义的函数名（如 oninput="handleInput"），但那就彻底绕开了节流 —— 面试直接挂

面试常考手写，但很少说明要哪种。其实就两类：时间戳版（首触发立刻执行）和定时器版（尾触发延后执行），行为不同，不能混着抄。

时间戳版：用 pre 记上次执行时间，now - pre >= delay 才执行。适合滚动监听、鼠标移动 —— “动起来就要响应”，首屏加载更及时
定时器版：用 timer 控制下次可执行时机，!timer 才进 setTimeout。适合按钮防重复提交、搜索联想 —— “宁可晚一点也不能太早”，避免误触
Lodash 的 _.throttle 默认双模式结合（{ leading: true, trailing: false }），自己手写时得明确选一种，别把两套逻辑塞进一个函数里
必须用 fn.apply(this, arguments) 或 fn.call(this, ...args)，否则 this 和参数全丢；箭头函数里不能用 this，得靠外层函数捕获

很多手写代码看似能跑，但一问就露馅。这三个点不处理，等于没写对。

throttle 返回的函数必须能接收事件对象（比如 event），且原样透传给 fn；漏掉 arguments 或硬写 fn() 就废了
没有处理首次触发的边界情况：时间戳版要初始化 pre = 0，定时器版要确保第一次进 if (!timer) 分支
没考虑 leading / trailing 配置项 —— 虽然基础版可不写，但如果面试官追问“怎么让第一次立刻执行、最后一次也执行”，答不上来就是硬伤