javaScript基本功之函数防抖与节流

1、函数节流与防抖

函数的节流与防抖是一种优化频繁调用时优化的方案。

比如canvas画笔时频繁获取位置点绘画会增大客服端CPU压力,那么就需要那控制频繁操作为一个范围内来优化而不影响绘画效果,

这样能让页面浏览更加顺畅,不会因为js的执行而发生卡顿。

函数节流是指一定时间内js方法只调用一次。比如人的眨眼睛,就是一定时间内眨一次。这是函数节流最形象的解释。
函数防抖是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次。比如生活中的坐公交,就是一定时间内,如果有人陆续刷卡上车,司机就不会开车。只有别人没刷卡了,司机才开车。

函数防抖:

比如搜索框停止输入后自动查询数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<input type="text" id="text">
<script>

var oText = document.querySelector( "#text" );
function debunce( delay ){
    var timer = null;
    return function(){
        var text = this.value;
        clearTimeout( timer );
        timer = setTimeout( function(){
            console.log( "ajax-->" + text );
        }, delay );
    }
}

oText.onkeyup = debunce( 1000 );

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

函数防抖还可以使用在提交数据时限制频繁触发多次提交而实现一次提交。

函数节流:

比如缩放窗口时触发resize事件的防止频繁触发的控制调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<div id="text"></div>
<script>
var oText = document.querySelector( "#text" );
function throttle(fn, delay){
    var startDate,
        timer;
    return function(ev){
        var currDate = +new Date();
        clearTimeout( timer );
        if( !startDate ){
            startDate = currDate;
            fn();
        }else{
            if( currDate - startDate >= delay ){
                startDate = currDate;
                fn();
            }else{
                timer = setTimeout( fn, 500 );
            }
        }
    }
}

function fn(){
    var d = new Date();
    console.log( d );
    oText.innerHTML = document.documentElement.clientWidth;
}

window.onresize = throttle( fn, 1000 );

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

以上的节流添加最后一次的定时触发,那么停止操作后会进行最后一次触发,只是这个触发会延迟0.5s,那么就可以防止最后一次停止后不触发而导致不能精确。

原文地址:https://www.cnblogs.com/zhangzhicheng/p/9721425.html

时间: 2024-10-03 07:03:24

javaScript基本功之函数防抖与节流的相关文章

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

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

vue函数防抖和节流

Vue函数防抖和节流https://zhuanlan.zhihu.com/p/72363385 <template> <div> <input type='text' v-model='value' @keydown = "hangleChange"> </div> </template> <script> function debounce(func, wait=1000){ let timeout; retur

函数防抖与节流[转载]

underscore.js提供了很多很有用的函数,两个函数都用于限制函数的执行. debounce 在解释这个函数前,我们先从一个例子看下这个函数的使用场景.假设我们网站有个搜索框,用户输入文本我们会自动联想匹配出一些结果供用户选择.我们可能首先想到的做法就是监听keypress事件,然后异步去查询结果.这个方法本身是没错的,但是如果用户快速的输入了一连串的字符,假设是10个字符,那么就会在瞬间触发了10次的请求,这无疑不是我们想要的.我们想要的是用户停止输入的时候才去触发查询的请求,这时候函数

函数防抖与节流

1.为什么会有函数的防抖与节流及使用场景 在进行窗口的resize.scroll,输入框内容校验或者向后端发起ajax等操作时, 如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕. 此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果. 2.函数防抖与函数节流的概念及实现原理 函数防抖(debounce): 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了

函数防抖和节流*(性能优化不错的选择)

函数节流: 频繁触发,但只在特定的时间内才执行一次代码 函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码(如果一个事件被频繁触发多次,节流函数可以按照固定频率去执行对应的事件处理方法) 两者区别在于函数节流是固定时间做某一件事,比如每隔1秒发一次请求.而函数防抖是在频繁触发后,只执行一次(两者的前提都是频繁触发) 函数节流的应用场景一般是onrize,onscroll等这些频繁触发的函数,比如你想获取滚动条的位置,然后执行下一步动作,如果监听后执行的是Dom操作,这样的频繁

函数防抖和节流的结合

函数节流有个毛病,就是最后一次事件执行后,如果距离上一次事件执行不到规定时间,那么最后一次事件就不会执行,解决方法就是把事件函数节流和防抖结合在一起 function throlle(callback,delay){ let startTime=0; let timer=null; return function (){ //使用new Date().getTime(),这样首次操作一定会执行 let endTime=new Date().getTime(); clearTimeout(time

函数防抖和节流

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

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

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

JavaScript函数节流和函数防抖的原理与区别

一.概念解释 ?函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.?大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变化,当高频率的扫描,人类是感觉不出来的.反而形成一种视觉效果,就是一张图.就像高速旋转的风扇,你看不到扇叶,只看到了一个圆一样.?同理,可以类推到js代码.在一定时间内,代码执行的次数不一定要非常多.达到一定频率就足够了.因为跑得越多,带来的效果也是一样.倒不如,把js代码的执行次数控制在合理的范围.