节流和防抖函数


/**
 * 节流函数
 * @param {Funtion} method 回调函数
 * @param {Object} context 上下文地址
 * @param {number} delay 延迟时间ms
 */
function throttle(method, context, delay) {
    delay = delay || 500;
    var currentDate = new Date();
    method.startTime = method.startTime || 0;
    if (currentDate - method.startTime > delay) {
        method.call(context);
        method.startTime = new Date();
    }
    else {
        clearTimeout(method.timer);
        method.timer = setTimeout(function () {
            throttle(method, context, delay);
        }, 50);
    }
}

/**
 * 防抖函数
 * @param {Funtion} method 回调函数
 * @param {Object} context 上下文地址
 * @param {number} delay 延迟时间ms
 */
function debound(method, context, delay) {
    delay = delay || 200;
    clearTimeout(context.deboundId);
    context.deboundId = setTimeout(function () {
        method.call(context);
    }, delay);
}

原文地址:https://www.cnblogs.com/jerrypig/p/10187368.html

时间: 2024-10-22 11:44:04

节流和防抖函数的相关文章

js函数的节流和防抖

js函数的节流和防抖 用户浏览页面时会不可避免的触发一些高频度触发事件(例如页面 scroll ,屏幕 resize,监听用户输入等),这些事件会频繁触发浏览器的重拍(reflow)和重绘(repaint)这会严重耗费浏览器性能,造成页面 卡顿. 举几个例子:比如说我们在滚动事件中要做一个复杂的计算,或者做一个按钮的防二次点击操作的需求,这些需求都会在频繁的事件 回调中做复杂计算,很有可能导致页面卡顿,这时候我们可以将多次计算合并为一次计算,只在一个精确点做操作.这些事可以利用 函数的防抖来实现

js、vue防抖函数、节流函数,工具类封装

防抖函数(可用于防止重复提交) 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次, 如果设定时间到来之前,又触发了事件,就重新开始延时.也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次. /** * 防抖函数(可用于防止重复提交) * 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次, * 如果设定时间到来之前,又触发了事件,就重新开始延时.也就是说当一个用户一直触发这个函数, * 且每次触发函数的间隔

节流和防抖的实现

1 防抖 + 定义:合并事件且不会去触发事件,当一定时间内没有触发这个事件时,才真正去触发事件 + 原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清楚上一次的延时操作定时器,重新定时 + 场景:keydown事件上验证用户名,输入法的联想 + 实现: function debounce(fn, delay) { var timer; return function() { var that = this; var args = arguments; clearTimeout

js的节流和防抖

1,节流 节流就是对连续的函数触发,在设定的间隔时间段内,只让其执行一次. 先来看看js高级程序设计3里面节流的代码 function throttle (method, context, wait) { clearTimeout(method.tId) method.tId = setTimeout(function () { method.call(context) }, wait) } 当函数连续执行的时候,如果之前的定时器还没执行,就把它清除了,再从新设置一个新的定时器. 我们可以对这个

javaScript节流与防抖

一.节流(throttle) 用来实现阻止在短时间内重复多次触发同一个函数.主要用途:防止使用脚本循环触发网络请求的函数的恶意行为,确保请求的真实性(当然也包括其他阻止高频触发行为的应用): 实现原理图: 代码实现: 1 //节流函数 2 function throttle(handler,wait){ 3 var lastDate = 0; 4 return function(){ 5 var newDate = new Date().getTime(); 6 if(newDate - las

节流与防抖

节流与防抖 节流和防抖,都是优化高频率执行操作的有效手段. 防抖函数 debounce 功能:连续的事件,只在最后一次触发时执行操作 应用场景:最常见的就是输入框验证,如:用户注册时候的手机号码验证或邮箱验证.只有等用户输入完毕后,才检查格式是否正确:搜索框sug请求 防抖函数的实现 function debounce (fn, wait) { let timer = null; return function() { let args = arguments; let context = th

节流和防抖 区别和实现

节流 实现: /** * 函数节流:开始会执行一次,持续触发事件的话,每隔wait时间执行一次: * 应用场景mousemove, scroll等会连续执行的事件,比较适合应用于动画相关的场景. * @param fn 需要节流的函数 * @param wait 间隔时间 */ export function throttle(fn, wait = 1000) { let lastTime = 0; //上次执行的时间 return function (...args) { let now =

js防抖函数

一.什么是函数防抖 概念:函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间. 举个栗子,坐电梯的时候,如果电梯检测到有人进来(触发事件),就会多等待 10 秒,此时如果又有人进来(10秒之内重复触发事件),那么电梯就会再多等待 10 秒.在上述例子中,电梯在检测到有人进入 10 秒钟之后,才会关闭电梯门开始运行,因此,“函数防抖”的关键在于,在 一个事件 发生 一定时间 之后,才执行 特定动作. 二.

js函数节流和防抖

// 函数节流 var canRun = true; document.getElementById("throttle").onscroll = function(){ if(!canRun){ // 判断是否已空闲,如果在执行中,则直接return return; } canRun = false; setTimeout(function(){ console.log("函数节流"); canRun = true; }, 300); }; // 函数防抖 var