JavaScript防抖与节流详解

 更新时间:2021年10月18日 15:59:10   作者:页神建辑-思而后学  
这篇文章主要介绍了JS中的防抖与节流及作用详解,本文通过文字说明加示例代码的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

防抖debounce

定义:对于短时间内连续触发的事件,比如滚动事件,防抖就是让某个时间期限内,事件处理函数只执行一次。

关于防抖,拿手指按压弹簧举例,用手指按压弹簧,一直按住,弹簧将不会弹起直到松开手指。

举例resize:

function debounce(fn, wait){
    var timer = null;
    return ()=>{
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn, wait);
    }
}
function handle(){
    console.log(Math.random());
}
window.addEventListener("resize",debounce(handle, 1000));

上面是非立即执行版

立即执行版

function debounce(fn, wait){
	let timeid, flag = true;
	return () => {
		clearTimeout(timeid);
		if(flag){
			fn();
			flag = false;
		}else{
			timeid = setTimeout(()=>{
				flag = true;
			}, wait);
		}
	}
}

拖动浏览器窗口,触发resize,此时并不触发handle函数,定时器计时,在计时时间内再次触发resize的话,则会从新计时,这样做的好处就是拖动浏览器窗口触发resize,并不会频繁执行handle函数,只让其在需要执行的时候去运行,有效的去除了冗余。

常见写法:

const debounce = (func, delay = 200) => {
  let timeout = null
  return function () {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.apply(this, arguments)
    }, delay)
  }
}

节流throttle

定义:让事件在一定时间内只执行一次。

本意是像水龙头的水滴一样,规定时间内只执行一次,减少频繁反复执行。

如搜索框input事件。

通过时间戳计算:

function throttle(fn,wait){
  let startTime = 0;
  return function(){
    let endTime = Date.now();
    if(endTime-startTime>wait){
      fn();
      startTime = endTime;
    }
  }
}

通过定时器:

function throttle(fn,wait){
  let timeid = null;
  return function(){
    if(!timeid){
       timeid = setTimeout(function(){
         fn();
         timeid = null;
       },wait)
    }
  }
}

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • JS try catch基本用法以及常见的异常处理

    JS try catch基本用法以及常见的异常处理

    JS异常处理的作用是帮助开发者识别和处理运行时的错误和异常情况,确保程序在出现问题时能够优雅地降级或恢复,而不是导致整个应用崩溃或产生不可预测的行为,这篇文章主要介绍了JS try catch基本用法以及常见的异常处理,需要的朋友可以参考下
    2025-04-04
  • 浅谈js在html中的加载执行顺序,多个jquery ready执行顺序

    浅谈js在html中的加载执行顺序,多个jquery ready执行顺序

    下面小编就为大家带来一篇浅谈js在html中的加载执行顺序,多个jquery ready执行顺序。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 原生js写的放大镜效果

    原生js写的放大镜效果

    在淘宝上购物时,总会看到类似放大镜的效果。以下为原生js写的一个放大镜效果,其中肯定有很多不足,请大牛们指正,谢啦
    2012-08-08
  • js open() 与showModalDialog()方法使用介绍

    js open() 与showModalDialog()方法使用介绍

    项目开发中经常要用到js open() 与showModalDialog()方法,下面有个不错的示例,喜欢的朋友可以研究下
    2013-09-09
  • js 实现div拖拽拉伸完整示例

    js 实现div拖拽拉伸完整示例

    这篇文章主要为大家介绍了js 实现div拖拽拉伸完整示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 微信小程序返回上一级页面的实现代码

    微信小程序返回上一级页面的实现代码

    这篇文章主要介绍了微信小程序返回上一级页面的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • js+FSO遍历文件夹下文件并显示

    js+FSO遍历文件夹下文件并显示

    js+FSO遍历文件夹下文件并显示...
    2007-03-03
  • JavaScript闭包详解

    JavaScript闭包详解

    一分钟理解JavaScript闭包,关于JavaScript闭包的内容介绍了很多,本文带着大家快速理解什么是JavaScript闭包,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 解决layui中table异步数据请求不支持自定义返回数据格式的问题

    解决layui中table异步数据请求不支持自定义返回数据格式的问题

    今天小编就为大家分享一篇解决layui中table异步数据请求不支持自定义返回数据格式的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • clipboard.js在移动端复制失败的解决方法

    clipboard.js在移动端复制失败的解决方法

    最近在使用clipboard.js碰到的一个小问题,通过查找相关资料解决了,所以下面这篇文章主要给大家介绍了关于clipboard.js在移动端复制失败的解决方法,需要的朋友可以参考借鉴,下面来一起学习学习吧
    2018-06-06

最新评论