javascript中的防抖与节流。

1.什么是防抖?它有什么作用?

  什么是防抖?相信行入门的小白,甚至做了一段时间的程序员也不太理解是什么意思,我也是听了公开课才了解一点,现在和大家分享一下我的理解!

  函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。比如,在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕,请求的次数多了浏览器会造成卡顿或者是卡死的状态,为避免这个情况的发生可以使用防抖来减少请求的频率。

  举个栗子:    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防抖和节流</title>
    <style>
        #app{
            width: 400px;
            height: 200px;
            background: #ccc;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div id=‘app‘></div>

    <script>
        let num = 1;
        let content = document.getElementById(‘app‘);

        function count() {
            content.innerHTML = num++;
        };
        content.onmousemove = count;

    </script>
</body>
</html>

  div 元素绑定了 mousemove 事件,当鼠标在 div(灰色)区域中移动的时候会持续地去触发该事件导致频繁执行函数,只要鼠标到元素中就会频繁的执行。

  

  添加防抖事件,所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

    

content.onmousemove = debounce(count,1000);

        function debounce(func, wait) {
            let timeout;
            return function () {
                let context = this;
                let args = arguments;

                if (timeout) clearTimeout(timeout);

                timeout = setTimeout(() => {
                    func.apply(context, args)
                }, wait);
            }
    }

  当你添加防抖事件后,鼠标再次移入元素内就不会出现上面的情况,只有鼠标移开后一秒后才执行(因为我设置的1s后执行)。

  2.什么是节流?

    当持续触发事件时,保证一定时间段内只调用一次事件处理函数。打个比方说节流通俗解释就比如我们水龙头放水,阀门一打开,水哗哗的往下流,秉着勤俭节约的优良传统美德,我们要把水龙头关小点,最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。

    所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

    1.利用时间戳达到节流效果:

      

    content.onmousemove = throttle(count,1000);

    function throttle(func, wait) {
        let previous = 0;
        return function() {
                let now = Date.now();
            let context = this;
            let args = arguments;
            if (now - previous > wait) {
                    func.apply(context, args);
                    previous = now;
            }
        }
    }

    在持续触发事件的过程中,函数会立即执行,并且每 1s 执行一次。

  2.定时器版:

    

    content.onmousemove = throttle(count,1000);

    function throttle(func, wait) {
            let timeout;
            return function() {
                let context = this;
                let args = arguments;
                if (!timeout) {
                            timeout = setTimeout(() => {
                            timeout = null;
                            func.apply(context, args)
                        }, wait)
                }

                }
    }

  在持续触发事件的过程中,函数不会立即执行,并且每 1s 执行一次,在停止触发事件后,函数还会再执行一次,跟上面的效果是一样的,

  其实这个方法看起来效果一样但还是有区别的,详细可以去看看这篇文章: https://www.jianshu.com/p/c8b86b09daf0

原文地址:https://www.cnblogs.com/0314dxj/p/11141158.html

时间: 2024-11-05 16:04:52

javascript中的防抖与节流。的相关文章

来聊聊JavaScript中的防抖和节流

目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html> <head> <meta charset="utf-8"> <title>问题演示</title> </head> <body> <script type="text/javascript&qu

Js中的防抖与节流

在实际开发中,我们经常需要绑定一些持续触发的事件,如resize.scroll,mousemove,input等,浏览器在默认情况下会对事件处理函数无限制的调用,这样就会加重浏览器的负载,导致用户体验很差,有些还会频繁向后台请求数据,对服务器造成不必要的压力有些情况下我们不需要事件持续触发过程中频繁的去执行事件处理函数,或者更希望把多次计算合并成一次,只操作一个精确点.对此,我们可以采用防抖(debounce)和节流(throttle)的方式来减少调用频率,同时又不影响实际效果. 函数防抖(de

JavaScript防抖和节流

JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html> <head> <meta charset="utf-8"> <title>问题演示</title> </head> <body> <script type="text/javascript"> window.onload = function(){ // 没有处理防抖和节流的代码

闲聊前端性能----防抖、节流、重绘与回流。

在最近,小米9卖的特别火,在官方抢购的时候基本都是一点既空.这不禁让我想到了,官网是怎样控制顾客不停点击发起请求而不导致官网崩溃的呢?这由此引出了前端性能的优化中的----防抖和节流.在闲聊完后你就会发现有些时候在抢购商品的时候,你用鼠标在几秒钟不停的按了数十次,或许它仅仅是发送了你第一次点击抢购的那个请求.所以说 抢购时间内的第一次点击尤为关键! 下面来介绍一下什么是防抖!        防抖:任务频繁触发的情况下,只有任务触发的间隔超过制定的时间间隔的时候,任务才会被执行. 下面引用一下知乎

VUE中的函数的防抖和节流 以及应用场景

先看看概念 函数防抖(debounce): 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时. 应用场景: search搜索联想,用户在不断输入值时,用防抖来节约请求资源. window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次 函数节流(throttle): 规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发多次函数,只有一次生效:

JavaScript中常见的十五种设计模式

在程序设计中有很多实用的设计模式,而其中大部分语言的实现都是基于“类”. 在JavaScript中并没有类这种概念,JS中的函数属于一等对象,在JS中定义一个对象非常简单(var obj = {}),而基于JS中闭包与弱类型等特性,在实现一些设计模式的方式上与众不同. 本文基于<JavaScript设计模式与开发实践>一书,用一些例子总结一下JS常见的设计模式与实现方法.文章略长,自备瓜子板凳~ 设计原则 单一职责原则(SRP) 一个对象或方法只做一件事情.如果一个方法承担了过多的职责,那么在

详谈js防抖和节流

本文由小芭乐发表 0. 引入 首先举一个例子: 模拟在输入框输入后做ajax查询请求,没有加入防抖和节流的效果,这里附上完整可执行代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>没有防抖</title> <style type="text/css"></sty

前端进击的巨人(八):浅谈函数防抖与节流

本篇课题,或许早已是烂大街的解读文章.不过春招系列面试下来,不少伙伴们还是似懂非懂地栽倒在(-面试官-)深意的笑容之下,权当温故知新. JavaScript的执行过程,是基于栈来进行的.复杂的程序代码被封装到函数中,程序执行时,函数不断被推入执行栈中.所以 "执行栈" 也称 "函数执行栈". 函数中封装的代码块,一般都有相对复杂的逻辑处理(计算/判断),例如函数中可能会涉及到 DOM 的渲染更新,复杂的计算与验证, Ajax 数据请求等等. 前端页面的操作权,大部分

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

Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 本文涉及知识点: 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 TCP 三次握手与四次挥手 浏览器渲染页面 在本文中,jsliang 会讲解通过自我探索后关于上述知识点的个人理解,如有纰漏.疏忽或者误解,欢迎各位小伙伴留言指出. 如果小伙伴对文章存有疑问,想快速得到回复. 或者小伙伴对 jsliang 个人的前端文档库感兴趣,也想将自己的前端知识整理出来. 欢迎