函数防抖 主要用于限制高频触发事件函数的执行间隔

var debounce = function (func, wait, lossless) {
    var lastTimeout, alreadyDo = false;
    if (typeof lossless == ‘undefined‘)
        lossless = true;
    return function () {
        var context = this,
              args = arguments;
        if (!alreadyDo) {
            alreadyDo = true;
            setTimeout(function () { alreadyDo = false }, wait);
            clearTimeout(lastTimeout);
            func.apply(context, args);
        } else if (lossless) {
            clearTimeout(lastTimeout);
            lastTimeout = setTimeout(function () {
                func.apply(context, args);
            }, wait);
        }
    };
}

///防抖函数
///防止事件函数高频执行,间隔wait毫秒执行
///lossless是否保存最后一次未到间隔时间的执行

时间: 2024-10-07 06:30:27

函数防抖 主要用于限制高频触发事件函数的执行间隔的相关文章

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

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

JS 函数防抖和函数节流

我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所以在处理类似的情况时,可以考虑使用函数节流和函数去抖来解决,至于具体使用哪一种方式,根据实际情况分析定夺,先来讲解一些这两者的概念 函数节流:在频繁触发的情况下,需要执行的逻辑只有执行完之后,才能继续执行下一次 函数防抖:在频繁触发的情况下,只有足够的空闲时间,才执行代码一次,如果没有执行完就清除掉,重新执行逻辑 应用场景:高频触发以下方法 页面滚

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

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

JavaScript函数节流和函数防抖之间的区别

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

函数防抖与节流[转载]

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

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

1.函数节流与防抖 函数的节流与防抖是一种优化频繁调用时优化的方案. 比如canvas画笔时频繁获取位置点绘画会增大客服端CPU压力,那么就需要那控制频繁操作为一个范围内来优化而不影响绘画效果, 这样能让页面浏览更加顺畅,不会因为js的执行而发生卡顿. 函数节流是指一定时间内js方法只调用一次.比如人的眨眼睛,就是一定时间内眨一次.这是函数节流最形象的解释.函数防抖是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次.比如生活中的坐公交,就是一定时间内,如果有人陆续刷卡上车,司机就不会开车.

函数防抖与节流

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

搜索框(附带事件函数)

最近做项目的时候,做的搜索框,今天终于做完善了,特贴出来,怕以后自己忘了,写完之后觉得自己写的还行, 搜索框的事件有: 1.获取焦点事件 2.键盘事件:这个事件又分为点击“delete”,“BackSpace”,字符键三种情况 不废话了,直接上代码: var senceNameSelectedId=null;var msgList=[];var tempInputsource=null;var senceNames=[];var currentPos=-1;var senceList=null;

JS 函数防抖 函数节流

平滑滚动到页面顶部 const scrollToTop = () => { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, c - c / 8); } } // 事例 scrollToTop() /** 函数防抖 * @param { functio