示例"/>
js 节流函数封装示例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>节流函数示例</title><divstyle="width: 400px;height: 400px;background-color: red;font-size: 30px; text-align: center; line-height: 200px;"></div>
</head><body><script>const throttle = function (fn, delay) {let timer = null;return function () {if (!timer) {timer = setTimeout(() => {fn.apply(this, arguments);timer = null;}, delay);}};};const test = function (name) {let count = 0;return throttle(function () {document.querySelector('div').innerHTML = name + count++;}, 400);};document.querySelector('div').addEventListener('mousemove', test('张三'))</script></body></html>
可能存在的难点:为什么返回一个function? 答:因为入参是个fn,你得把返回值也写成一个函数。
为什么清除定时器要用timer=null,不用clearTimeout?答:因为清除定时器的时机是三秒后,只能写在定时器内,而clearTimeout只能定时器外部调用,所以用null。
更多推荐
js 节流函数封装示例
发布评论