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. 【技术分享：python 应用之一】如何使用 Python 对 Excel 做一份数据透视表

    客户这边,其中有一张如同上图所示的数据汇总表,然而需求是,需要将这张表数据做一个数据透视表,最后通过数据透视表中的数据,填写至系统数据库.拿到需求,首先就想到肯定不能直接用设计器去操作 Excel,通 ...

  2. Qt 静态库与共享库(动态库)共享配置的一个小办法

    对于用 QtCreator 编写静态库,动态库,如何能够以最小的改动, 方便的实现两种形式的库文件生成:可以这麽做: 1)使用想到建立静态库 2)在项目配置文件*.pro  中: TARGET = n ...

  3. Controller控制台Vuser虚拟用户的运行状态

    Controller控制台Vuser运行的状态 Down:没有运行Pending:挂起Init:初始化Ready:准备就绪Run:正在运行Rendezvous:正在集结Passed:运行通过Faile ...

  4. Sensor在内核中的驱动框架【转】

    本文转载自:http://blog.csdn.net/armfpga123/article/details/52840370 内核中对sensor的抽象:drivers/sensors/sensors ...

  5. 什么是webpack以及为什么使用它

    什么是webpack以及为什么使用它 新建 模板 小书匠  在ES6之前,我们要想进行模块化开发,就必须借助于其他的工具.因为开发时用的是高级语法开发,效率非常高,但很可惜的是,浏览器未必会支持或认识 ...

  6. Python 使用Qt进行开发（二）

    上次简单实现了显示窗口,下面我们在窗口中加入一些部件. 1,我们在窗口中使用 setToolTip() 方法添加一个文本提示,在窗口中鼠标暂停几秒即可显示该文本信息. class test(): de ...

  7. MyRocks安装部署

    参考:https://www.cnblogs.com/WonderHow/p/5621591.html CentOS 7.3 gflags:git clone https://github.com/g ...

  8. trim配合prefix，prefixOverrides，suffix，suffixOverrides构建动态sql语句

    1.在接口构建方法 public interface EmployeeMapperDynamicSQL { //携带了哪个字段查询条件就带上这个字段的值 public List<Employee ...

  9. 如何获得select被选中option的value和text和其他属性值

    比如这个: <select id="select"> <option value="A" url="http://www.baidu ...

  10. JS关于this指向的小练习

    请阅读以下代码:var obj = {};obj.log = console.log;obj.log.call(console, this)该代码在浏览器中执行,输出的日志结果是什么? 这道题就是问c ...