js的抖动

　　　在 js 中 改变窗口大小 & 上下滚动滚动条 & 反复向输入框中输入内容 ... , 如果绑定了相应的事件 , 这些事件的触发频率非常高, 严重影响用户体验和服务器的性能 , 这种问题 在js中 就叫 js 的抖动 .

解决方法 : 防抖 & 节流 

js的防抖

就是在在持续触发的过程中不会执行对应的函数 , 当触发停止一段时间后再执行对应的函数

具体就是在触发事件中设置一个定时器来延迟对应函数的生效 ,只有当两次触发事件的间隔时间能够触发定时器才会使对应函数生效

   　<style>
       .mybox {
            width: 600px;
            height: 1500px;
            background-color: pink;
            margin:  auto;
        }
    </style>
</head>
<body>
    <div class="mybox"></div>
</body>
<script>
    var timer;
    window.onscroll = function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            console.log('我滚啦')
        }, )
    }
</script>

js的节流

当持续触发事件时 ，每隔固定的时间也要调用一次函数

就是给对应函数设置一个触发的条件 , 每次触发记录下当前的时间戳

当两次获取的时间戳的差值满足条件时将执行对应的函数 , 并且将当前的时间记为初次获取的时间戳

　    <style>
      .mybox {
            width: 600px;
            height: 1500px;
            background-color: pink;
            margin:  auto;
        }
    </style>
</head>
<body>
    <div class="mybox"></div>
</body>
<script>
    function fn() { //执行函数
        console.log('我滚啦')
    }
    function throttle(wait, func) {
        var beginTime = Date.now()
        return function () {
            var currentTime = Date.now()
            var space = currentTime - beginTime
            if (space >= wait) {
                func()
                beginTime = Date.now()
            }
        }
    }
    , fn)
</script>

js的抖动及防抖和节流的更多相关文章

  1. js中的函数防抖与节流

    一.滚动条监听的例子 写一个功能需求-- 监听浏览器滚动事件,返回当前滚条与顶部的距离,代码如下: function showTop () { var scrollTop = document.bod ...

  2. js高阶函数应用—函数防抖和节流

    高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...

  3. js防抖和节流

    今天在网上看到的,里面的内容非常多.说下我自己的理解. 所谓的防抖就是利用延时器来使你的最后一次操作执行.而节流是利用时间差的办法,每一段时间执行一次.下面是我的代码: 这段代码是右侧的小滑块跟随页面 ...

  4. 2019 面试准备 - JS 防抖与节流 (超级 重要!!!!!)

    Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 本文涉及知识点: 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 ...

  5. 深入理解JS防抖与节流

    参考博客:JS防抖和节流,感谢作者的用心分享 日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为deb ...

  6. JS的防抖与节流

    JS的防抖与节流在进行窗口的resize.scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕.此时我们可以采用debounce(防抖)和t ...

  7. JS的防抖和节流

    数个月之前,在一次前端的性能优化中,接触到了JS中防抖和节流,一开始还不明白他们的应用在哪里,可后来才知道,这是前端中最基础的性能优化,在绑定 scroll .resize 这类事件时,当它发生时,它 ...

  8. js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据

    防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如 ...

  9. 因为它，我差点删库跑路：js防抖与节流

    前言 前端踩雷:短时间内重复提交导致数据重复. 对于前端大佬来说,防抖和节流的技术应用都是基本操作.对于"兼职"前端开发的来说,这些都是需要躺平的坑. 我们今天就来盘一盘js防抖与 ...

随机推荐

  1. memset设置最大值

    初始化为最大值 memset(mp,0x7f,sizeof(mp));

  2. sublime的python开发环境搭建

    至少很长一段时间内,我个人用的一直是pycharm,也感觉挺好用的,也没啥大毛病 但是pycharm确实有点笨重,啥功能都有,但是有很多可能这辈子我也不会用到,并且pycharm打开的速度确实不敢恭维 ...

  3. VTK 编译过程中出现的hdf5长度(I64)错误解决办法

    最近在使用vtk和cuda做大规模图像处理方面的问题研究,在编译vtk的过程中发现第三方库hdf5不能够解决I64长度的探测识别问题.为了节约大家的时间,现在把我经过实践得到的解决方案共享出来,这里要 ...

  4. json 的简单应用

    今天做爬虫时的一点盲区 :字符串, 字典,写到同一个文件中.难以利用!比如这样的数据:str = “hi,budy. i like 52pojie!”dirt = {“陈墨”:["男&quo ...

  5. （69）Python异常处理与断言

    http://blog.csdn.net/pipisorry/article/details/21841883 断言 断言是一句必须等价于布尔真的判定;此外,发生异常也意味着表达式为假.这些工作类似于 ...

  6. Spring Boot教程（十二）整合elk（1）

    elk 简介 Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引自动分片,索引副本机制,restful风格接口,多数据源,自动搜索负载等. Logstash是 ...

  7. es之批量提交操作

    1:批量查询操作 1):插入测试数据 PUT /costumer/doc/1{ "name": "zhangsan", "age": 20} ...

  8. SQL server 安装教程

      双击sql server 2008的.exe安装文件,进入[SQL Server 安装中心]. 点击界面左侧的[安装],然后点击右侧的[全新SQL Server 独立安装或向现有安装添加功能],进 ...

  9. Java九种基本数据类型，以及他们的封装类

    基本类型 大小(字节) 默认值 封装类 byte 1 (byte)0 Byte short 2 (short)0 Short int 4 0 Integer long 8 0L Long float ...

  10. bash中的set, env, export unset的区别

    参考这篇文章很好 参考这篇文章2 -------------------------- == set显示的是当前shell的变量, 不同的shell, 它的私有变量是不同的 env是显示用户的变量, ...