js函数节流(解决频繁触发函数的性能问题)

? JS中的函数大多数情况下都是由用户主动调用触发的,但在一些少数情况下,函数的触发不是由用户直接控制的。在这些场景下,函数有可能被非常频繁地调用,而造成大的性能问题。

  函数被频繁调用的场景

键盘事件:

  参考百度的搜索框没输入一个字母就发送一次Ajax请求开销很大 通过下面的函数可以实现性能的优化,每过500ms 触发一次事件

 var isClick;
    $( ‘text‘ ).on( ‘keydown‘, function () {
        clearTimeout( isClick );
        isClick = setTimeout(function () {
            //发送Ajax请求
            $.ajax({
                url: ‘...‘
                ...
            });
        }, 500 );
    });
//上面所有的使用场景都适用

鼠标移动触发事件

var range = 10*10;//定义返回10px 小面 三角函数未开方 所有这里需要*10
var currentPoint;
function distance( p1, p2 ) {
    return Math.abs( Math.pow (p1.x - p2.x, 2 ) - Math.pow (p1.y - p2.y, 2 ) );
}
$( ‘#div‘ ).on( ‘mousemove‘, function ( e ) {
    if ( !currentPoint ) {
        currentPoint = {
            x:e.offsetX,
            y:e.offsetY
        };
    };
if ( distance( currentPoint, e.PONIT ) < range ) return;
    // 正常执行的代码
    currentPoint = {};
});

总结 : 函数节流就是为了解决函数的触发频率过高的问题

另外附上我个人域名 www.wanyifeng.top 没事可以看看,欢迎留言!!

时间: 2024-10-05 01:03:02

js函数节流(解决频繁触发函数的性能问题)的相关文章

你不知道的函数节流,提高你的lJS性能!

浏览器的DOM计算处理非常耗费CPU时间,霸占内存,这对我们的开发来说是非常不友好的,,比如IE浏览器的onresize事件就可能在用户稍微拖动一下窗口时计算上千次,甚至更高频率直接让浏览器崩溃... 手写过轮播图的同学都知道节流阀的存在,那么函数节流亦是如此(参考高程): var processor = { timeoutId :null, // 实际进行处理的方法 performProcessing: function(){ // 实际执行的代码 }, // 初始化处理调用的方法 proce

微信小程序使用函数防抖解决重复点击消耗性能问题

wxml: <view bindtap="doubleTap" bindtouchstart="touchStart" bindtouchend="touchEnd">click me</view> js: // 防止重复点击 touchStart(e) { this.touchStartTime = e.timeStamp; }, touchEnd(e) { this.touchEndTime = e.timeStamp

js的函数节流(throttle)

什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在一个正常的操作中,都有可能在一个短的时间内触发非常多次事件绑定程序.而大家知道,DOM操作时很消耗性能的,这个时候,如果你为这些事件绑定一些操作DOM节点的操作的话,那就会引发大量的计算,在用户看来,页面可能就一时间没有响应,这个页面一下子变卡了变慢了.甚至在IE下,如果你绑定的resize事件进行

js函数节流和函数防抖

概念解释 函数节流: 频繁触发,但只在特定的时间内才执行一次代码 函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码 函数节流 函数节流应用的实际场景,多数在监听页面元素滚动事件的时候会用到.因为滚动事件,是一个高频触发的事件. 以下是监听页面元素滚动的示例代码: // 函数节流var canRun = true; document.getElementById("throttle").onscroll = function(){ if(!canRun){ // 判

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

浅谈javascript的函数节流

什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在一个正常的操作中,都有可能在一个短的时间内触发非常多次事件绑定程序.而大家知道,DOM操作时很消耗性能的,这个时候,如果你为这些事件绑定一些操作DOM节点的操作的话,那就会引发大量的计算,在用户看来,页面可能就一时间没有响应,这个页面一下子变卡了变慢了.甚至在IE下,如果你绑定的resize事件进行

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

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

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

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

理解运用JS的闭包、高阶函数、柯里化

一.闭包 1. 闭包的概念 闭包与执行上下文.环境.作用域息息相关 执行上下文 执行上下文是用于跟踪运行时代码求值的一个规范设备,从逻辑上讲,执行上下文是用执行上下文栈(栈.调用栈)来维护的. 代码有几种类型:全局代码.函数代码.eval代码和模块代码:每种代码都是在其执行上下文中求值. 当函数被调用时,就创建了一个新的执行上下文,并被压到栈中 - 此时,它变成一个活动的执行上下文.当函数返回时,此上下文被从栈中弹出 function recursive(flag) { // Exit cond