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. scrapy项目2：爬取智联招聘的金融类高端岗位（spider类）

    ---恢复内容开始--- 今天我们来爬取一下智联招聘上金融行业薪酬在50-100万的职位. 第一步:解析解析网页 当我们依次点击下边的索引页面是,发现url的规律如下: 第1页:http://www. ...

  2. Android字体设置，Roboto字体使用

    一.自定义字体 1.android Typeface使用TTF字体文件设置字体 我们可以在程序中放入ttf字体文件,在程序中使用Typeface设置字体.第一步,在assets目录下新建fonts目录 ...

  3. java list去重方式，以及效率问题

    之前面试被问到关于java如何去重的问题,当时没怎么留意,今天刚好项目中用到了,所以记录一下. 实体类: /** * 用户类 */ class User{ private String usernam ...

  4. sklearn—支持向量机

    SVC介绍: 拟合出来的模型为一个超平面 解决与样本维数无关,适合做文本分类 解决小样本.非线性.高维 是用于分类.回归.孤立点检测的监督学习方法的集合. 优点: 有效的高维空间 维数大于样本数的时候 ...

  5. 自动化运维--ansible(2)

    问题一:如何在多台服务器中配置Web项目上线的所有环境 解答: 1.使用ansible配置nginx服务 在安装前了解rpm与yum的区别  rpm是压缩包安装依赖包需要自己手动安装,yum安装解决依 ...

  6. c++实验7 二叉树

    二叉树数据结构表示及基本操作算法实现 1.所加载的库函数或常量定义及类的定义: #include<stdlib.h> #include<stdio.h> #include&qu ...

  7. windows下 文件资源管理器 的操作

    alt + d 可以直接把光标移动到地址栏 shift + f10 可以触发右键, 后面就可以用键盘操作右键中的内容了 ( 如打开vscode alt + 空格 可以弹出窗口的菜单栏 ( 控制最大化 ...

  8. webpack中的 chunk,module,bundle的区别，以及hidden modules是什么

    hidden modules是什么: chunk,module,bundle的区别 总结: module是指任意的文件模块,等价于commonjs中的模块 chunks是webpack处理过程中被分组 ...

  9. 二：flask-debug模式详解

    debug模式的情况下可以抛出详细异常信息 新建一个脚本并运行 访问 此时是非debug模式,如果运行的时候代码报错了,是不会提示详细错误的,只会报服务器内部错误 开启debug模式,可以查看到详细错 ...

  10. Vue模版编译

    一 模版文件 <div> <header> <h1>I'm a template!</h1> </header> <p v-if=&q ...