当前位置：首页 > news >正文

海东市城市规划建设局网站备案审核网站显示500

news 2025/11/6 2:10:50

海东市城市规划建设局网站,备案审核网站显示500,宁波正规seo企业优化,大学信息化建设网站群防抖和节流，本质上是优化高频率执行代码的一种手段，比如：resize、scroll、keypress、mousemove这些事件在触发的时候，会不断调用绑定在事件上的回调函数，这样极大浪费资源，降低前端性能。为了优化体验&am…

防抖和节流，本质上是优化高频率执行代码的一种手段，比如：resize、scroll、keypress、mousemove这些事件在触发的时候，会不断调用绑定在事件上的回调函数，这样极大浪费资源，降低前端性能。

为了优化体验，需要对这类事件进行调用次数的限制，所以我们采取了防抖和节流的手段来减少调用频率。

节流：在n秒内重复发生的事件，只有一次是生效的
防抖：在n秒后再执行该事件。

节流

完成节流可以使用时间戳与定时器的写法，使用时间戳的写法，事件会立即执行，停止触发后没有办法再次执行：

function throttled1(fn, delay = 500) {let oldtime = Date.now()return function (...args) {let newtime = Date.now()if (newtime - oldtime >= delay) {fn.apply(null, args)oldtime = Date.now()}}
}

使用定时器的写法，delay毫秒后第一次执行：

function throttled2(fn, delay = 500) {let timer = nullreturn function (...args) {if (!timer) {timer = setTimeout(() => {fn.apply(this, args)timer = null}, delay);}}
}

两种写法的结合后：

function throttled(fn, delay) {let timer = nulllet starttime = Date.now()return function () {let curTime = Date.now() // let remaining = delay - (curTime - starttime) // let context = thislet args = argumentsclearTimeout(timer)if (remaining <= 0) {fn.apply(context, args)starttime = Date.now()} else {timer = setTimeout(fn, remaining);}}
}

防抖

简单的封装：

function debounce(func, wait) {let timeout;return function () {let context = this; // thislet args = arguments; // eventclearTimeout(timeout)timeout = setTimeout(function () {func.apply(context, args)}, wait);}
}