①防抖：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

        div {

            height: 2200px;

            background-color: pink;

        }

    </style>

</head>

<body>

    <div>我是内容部分</div>

    <script type="text/javascript">

        //防抖：函数只执行最后一次，若时间间隔小于500毫秒，则函数不执行

        window.onscroll = debounce(function () {

            console.log("调用了1次");

        }, 500)

        function debounce(func, delay = 300) {

            var timer

            return function () {

                var that=this

                var args=arguments

                clearTimeout(timer)

                timer = setTimeout(function(){

                    func.apply(that,args) //改变定时器中的this指向

                },delay)

            }

        }

    </script>

</body>

</html>

②节流：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>

<body>

  <button>点击</button>

  <script>

    //节流：函数在一定的时间里只能执行那么几次，点击后等500毫秒触发，只能500毫秒触发一次

    var btn = document.getElementsByTagName('button')[0]

    btn.onclick = throttle(function () {

      console.log(111);

    }, 500)

    function throttle(func, wait) {

      var timer

      return function () {

        var that = this

        var args = arguments

        if (!timer) {

          timer = setTimeout(function () {

            timer = null

            func.apply(that, args) //改变定时器中的this指向

          }, wait)

        }

      }

    }

  </script>

</body>

</html>

JavaScript：防抖与节流的更多相关文章

  1. JavaScript 防抖和节流

    1. 概述 1.1 说明 在项目过程中,经常会遇到一个按钮被多次点击并且多次调用对应处理函数的问题,而往往我们只需去调用一次处理函数即可.有时也会遇到需要在某一规则内有规律的去触发对应的处理函数,所以 ...

  2. 来聊聊JavaScript中的防抖和节流

    目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html& ...

  3. 原生JavaScript实现函数的防抖和节流

    原生JavaScript实现函数的防抖和节流 参考:https://www.jianshu.com/p/c8b86b09daf0 想详细了解的直接戳上面链接了,讲得非常清楚.下面只给代码和我自己写的注 ...

  4. 彻底搞懂JavaScript的闭包、防抖跟节流

    最近出去面试了一下,收获颇多!!! 以前的我,追求实际,比较追求实用价值,然而最近面试,传说中的面试造火箭,工作拧螺丝,竟然被我遇到了.虽然很多知识点在实际工作中并不经常用到,但人家就是靠这个来筛选人 ...

  5. JavaScript 中的防抖和节流

    什么是防抖 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.如下图,持续触发 scrol ...

  6. javascript之防抖与节流

    防抖 你是否在日常开发中遇到一个问题,在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作. 这些需求都可以通过函数防抖动来实现.尤其是第一个需求,如果在频繁的事件回调中做复杂计算,很有可能导 ...

  7. JavaScript中函数防抖、节流

    码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14565642.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...

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

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

  9. js防抖和节流

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

随机推荐

  1. CPU相关的学习

    我理解的CPU 目前对cpu的了解停留在这个水平 查看CPU型号: cat /proc/cpuinfo |grep model |tail -n 1 model name : Intel(R) Xeo ...

  2. CSS属性（边框）

    1.边框 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U ...

  3. C语言中的const用法

    Const是什么? const是一个C语言的关键字,它限定一个变量不允许被改变.使用const在一定程度上可以提高程序的健壮性,另外,在观看别人代码的时候,清晰理解const所起的作用,对理解对方的程 ...

  4. webug第二关:从图片中你能找到什么？

    第二关:从图片中你能找到什么? 记事本打开发现提示 binwalk,发现压缩包rar

  5. 怎么用思维导图软件iMindMap整理发文思路

    如果你是一个普通的博客作者,那么你就应该明白在枯竭时寻找灵感就像是一场噩梦,即使你有一千个想法,但是你无法将它们关联起来也是无用的,所以,为什么不试试iMindMap思维导图呢,尝试创新,进行组建,你 ...

  6. 为什么换了电脑安装MindManager提示密钥失效？

    相信很多MindManager用户遇到过这样的问题,不想在原电脑上使用MindManager思维导图软件,想要换电脑安装,但是提示该许可证密钥失效了.下面文章就教大家如何解决这个问题: 我们在Mind ...

  7. css3系列之@font-face

    @font-face 这个属性呢,必须设置在 css的根下,也就是说,不能设置在任何元素里面. @font-face: 参数: font-family:  给这个文字库 起个名字. src: url( ...

  8. C语言讲义——库函数排序qsort

    qsort函数在在stdlib.h中. 函数原型 void qsort(void *base, size_t nitems, size_t size, int (*compar)(const void ...

  9. 使C语言实现面向对象的三个要素，你掌握了吗？

  10. mfc 笔记

    在类成员初始化时,使用另一个成员变量,必须满足,在.h声明时在另一个变量之后,初始 .hprivate: //K线图位置 CPoint m_KPoint; //十字光标位置 CPoint m_trac ...