iwowen的博客
iwowen
记录和分享技术
  1. 首页
  2. 前端
  3. 正文

js函数节流和防抖

2020年01月15日 112点热度 0人点赞 0条评论

什么是函数节流?

就是函数在一定时间只能执行一次。

举例:再使用mousemove事件时,函数会不断触发,为了节省计算机资源和网络资源,控制函数调用频率,也就是n秒内,不管调用多少次,只生效一次。

什么是函数防抖?

函数被控制在n秒后再执行,如果时间内再次触发函数则重新计时。

举例:在一定时间内点击两次按钮,只有最后一次有效。

怎么实现函数节流?

使用定时器对函数调用进行限制。

每次调用函数时创建定时器,传入所需函数。每次只有当函数执行完毕后才能重新创建定时器。这样,一定时间内频繁调用函数时,如果定时器正在生效则不会再次调用。

function throttle(fn, wait) {
    var time = null
    return function() {
        if (!time) {
            time = setTimeout(function() {
                fn.apply(this, ...arguments);
                time = null
            }, wait)
        }
    }
}

调用方法:

document.body.onmousemove = throttle(() => {
    console.log('我1秒只执行一次')
}, 1000)

怎么实现函数防抖?

根据上面的解释,调用n秒后生效,如果这段时间内重复调用,则重新设置定时。

function noTremble(fn, wait) {
    var time = null
    return function() {
        if (time) {
            clearTimeout(time)
            time = null
        }
        time = setTimeout(() => {
            fn.apply(this, ...arguments)
        }, wait)
    }
}

调用方法:

document.body.onmousemove = noTremble(() => {
    console.log('1秒内重复调用,我只执行最后一次')
}, 1000)
标签: js
最后更新:2020年11月22日

什码

保持饥渴的专注,追求最佳的品质

点赞
< 上一篇
下一篇 >

文章评论

取消回复

最新 热点 随机
最新 热点 随机
使用rollup和typescript搭建自己的函数库 前端关于性能优化方面的记录 关于前端BFC相关笔记 js数据类型和数据转换 dom事件笔记 css盒模型
关于前端BFC相关笔记前端关于性能优化方面的记录前端使用canvas实现贪吃蛇小游戏前端css实现左中右布局如何在react项目中使用redux?使用create-react-app打造多页面应用
js中new的过程是什么? 在vue中使用mock 关于前端BFC相关笔记 前端使用canvas实现贪吃蛇小游戏 使用rollup和typescript搭建自己的函数库 如何在react项目中使用redux?
分类目录
  • react
  • vue
  • 前端
  • 工具
文章归档
  • 2020年12月 (1)
  • 2020年5月 (2)
  • 2020年4月 (3)
  • 2020年3月 (1)
  • 2020年2月 (1)
  • 2020年1月 (2)
  • 2019年12月 (1)
  • 2019年11月 (3)
  • 2019年10月 (1)

COPYRIGHT © 2020 iwowen的博客. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

蜀ICP备19037276号-1