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. Javascript高级程序设计第三版-笔记

    1.JS数值最大值最小值: >Number.MIN_VALUE <5e-324 >Number.MAX_VALUE <1.7976931348623157e+308 判断数值是 ...

  2. HDU 2243 ( Trie图 矩阵构造幂和 )

    题意 :  长度不超过L,只由小写字母组成的,至少包含一个词根的单词,一共可能有多少个呢?这里就不考虑单词是否有实际意义. 比如一共有2个词根 aa 和 ab ,则可能存在104个长度不超过3的单词, ...

  3. Linux高级调试与优化——gdb调试命令

    番外 2019年7月26日至27日,公司邀请<软件调试>和<格蠹汇编——软件调试案例集锦>两本书的作者张银奎老师进行<Linux高级调试与优化>培训,有幸聆听张老师 ...

  4. c语言中static关键字用法详解

    个人总结: 1.C不是面向对象的,在c中static修饰的变量或函数仅在当前文件中使用 2.C可以对局部变量使用static修饰(注意面向对象的java则不行),其放在全局区一直存在 概述static ...

  5. NumericStream && Stream综合练习

    一.NumericStream 我们可以将一个Stream转化为对应的数字Stream,如mapToInt.mapToLong转化为IntStream.LongStream等(NumericStrea ...

  6. Flink集群环境搭建

    环境准备 master:171:slave:171,172:flink版本:1.3.0 下载地址:http://archive.apache.org/dist/flink/flink-1.3.0/ 集 ...

  7. 【SpringMVC】---搭建框架步骤

    项目如下 一.加入 Jar 包 部分jar包可以不导(第4.9.11个可以不导入) 二.在 Web.xml 中配置 DispatcherServlet <?xml version="1 ...

  8. 解析jmeter阶梯加压与请求的计算

    用百度做例子 我们设置阶梯加压线程组的请求参数,如下图 上图表示 1:每隔2秒钟,会在1秒内启动5个线程 2:每次线程加载之后都会运行2s然后开始下一次线程加载 3:最终会加载50个线程并持续运行30 ...

  9. Java课堂疑问解答与思考4

    一. 请运行以下示例代码StringPool.java,查看其输出结果.如何解释这样的输出结果?从中你能总结出什么? 答:定义的三个字符串如果相等,系统自动创建一个,并调用这个,对于由new创建的字符 ...

  10. Express中间件body-parser

    在http请求种,POST.PUT.PATCH三种请求方法中包含着请求体,也就是所谓的request,在Nodejs原生的http模块中,请求体是要基于流的方式来接受和解析. body-parser是 ...