javascript 节流器防抖动，返回顶部

最新推荐文章于 2022-04-20 11:56:09 发布
最新推荐文章于 2022-04-20 11:56:09 发布
阅读量124 收藏
点赞数
分类专栏： javascript学习日记 文章标签： javascript html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdcdhj/article/details/120479571
版权
本文介绍了一个实现网页返回顶部功能的HTML和JavaScript代码示例，结合了CSS样式定义按钮的外观和位置。同时，使用了节流函数优化滚动事件，避免频繁触发，提高页面性能。当页面滚动超过一定距离时，返回顶部按钮显示；否则隐藏。点击按钮，页面平滑滚动到顶部。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		button{
			width: 80px;
			height: 30px;
			background-color: red;
			color: white;
			text-align: center;
			border: 0;
			border-radius: 3px;
			position: fixed;
			bottom:20px ;
			right: 30px;
			z-index: 99;
			display: none;
		}
		</style>
	</head>
	<body>
		<button id="mybtn" name="mybtn" onclick="topFn()">回到顶部</button>
		<div style="background-color: black;color: white;padding: 30px;">向下滑动</div>
		<div style="background-color: lightgrey;padding: 30px 30px 2500px;">该实例演示如何实现网页返回顶部</div>
		<script language="javascript">
		//单继承单复制对象属性
		var extend=function(target,source){
			for(var property in source){
				target[property]=source[property];
			}
			return target;
		}
		//节流器
		var throttle=function(){
			var isClear=arguments[0],fn;
			if(typeof isClear==='boolean'){
				fn=arguments[1];
				fn.__throttleID&&clearTimeout(fn.__throttleID);
			}else{
				fn=isClear;
				param=arguments[1];
				var p=extend({
					context:null,
					args:[],
					time:300
				},param);
				arguments.callee(true,fn);
				fn.__throttleID=setTimeout(function(){
					fn.apply(p.context,p.args)
				},p.time)
			}
		};
		
		function scrollFn(){
			if(document.body.scrollTop>100||document.documentElement.scrollTop>100){
				document.getElementById('mybtn').style.display="block";
			}else{
				document.getElementById('mybtn').style.display="none";
			}
		}
		function topFn(){
			document.body.scrollTop=0;
			document.documentElement.scrollTop=0;
		}
		window.onscroll=function(){
			throttle(scrollFn,[50]);
		};
		
		</script>
	</body>
</html>
cdcdhj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript返回顶部的按钮实现方法
10-23
下面将详细介绍如何使用 JavaScript 来实现一个返回顶部的按钮。 首先，我们需要在 HTML 中创建一个用于触发返回顶部动作的元素，通常是一个链接或按钮。这里我们使用一个没有链接地址的 `<a>` 标签，通过 `#btn` ...
JavaScript节流阀
weixin_63456913的博客
11-22 88
JavaScript节流阀
JS的节流与防抖的目的，区别以及实现方式 （关注收藏，持续更新）
王春燕的博客
04-20 7443
一、节流和防抖的目的： 都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，防止在短时间内频繁触发同一事件而出现延迟，假死或卡顿的现象 二、节流和防抖的区别： 防抖：如果不断在delay之前重新触发，那么定时器会不断重新计时，最终会在最后一次完后才执行，对于需要实时响应的，应该用节流。 节流：目前有一事件A设置了定时器，那么在delay之前触发，都只会触发一次 三、节流和防抖的详解 防抖 debounce（设置1分钟只会执行一次，如果1分钟内又多次触发，会从再次触发开
Javascript节流器
meloseven的专栏
03-07 827
节流器：对重复的业务逻辑进行节流控制，执行最后一次操作并取消其他操作，以提高性能。节流器可在很多UI操作中用到，例如绑定了scroll、mouseover事件等//节流器 var throttle = function(){ //获取第一个参数 var isClear = arguments[0],fn; //如果第一个参数是boolean类型，那么表示清除计时器 i
原生JS节流器实现和requestAnimationFrame()节流器实现
一刀的博客
02-12 517
前言 计时器setTimeout()和定时器setInterval()长期以来是JavaScript动画最先进的工具，但是这两者都是在同步代码执行之后,经过给定的延迟后,把任务加入到宏任务队列中， 对于其执行重绘时序，却没有相应的方法，因此Firefox4为其浏览器添加了一个叫requestAnimationFrame()的方法，目前基本得到各大浏览器的支持。 节流器的基本思想是在使得进入任务队列的方法执行完毕之后（或者一定时间后）才允许继续向任务队列加入相同的任务 使用setTimeout() va
js设计模式之节流器模式
weixin_34005042的博客
06-20 212
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaScript节流防抖
06-09
js节流防抖 $u.throttle(()=>{ // 节流 },1000) $u.debounce(()=>{ // 防抖 },3000)
javascript实现节流和防抖
03-15
在JavaScript编程中，"节流"（Throttling）和"防抖"（Debouncing）是两种优化性能的重要技术，特别是在处理用户交互事件、滚动事件或者窗口resize事件时，可以有效防止函数频繁执行，节省资源。这两种技术的核心都是...
javaScript函数节流与防抖之区别
08-11
函数节流（throttle）和函数防抖（debounce）是JavaScript性能优化的重要技巧，它们主要用于处理频繁触发的事件，如窗口滚动、页面加载、输入框输入等场景。 **函数防抖（debounce）** 是一种策略，其主要目的是在...
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
10-21
JavaScript实现跟随滚动条漂浮的返回顶部按钮效果知识点解析： 一、背景介绍： 在网页设计中，当页面内容很长，超出了用户的显示区域时，为了提升用户体验，常常会设计一个返回页面顶部的按钮。随着用户滚动页面，...
javascript 节流器
u010271602的博客
11-07 790
节流器：对重复的业务逻辑进行节流控制，执行最后一次操作并取消其他操作，以提高性能。 var extend = function (target,source) { for(var property in source){ target[property] = source[property]; } return target; } var throttle
JS函数节流
永不放弃的博客
02-26 4274
函数节流的原理 函数节流的原理挺简单，那就是定时器。当我触发一个事件时，先setTimout让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就clear掉原来的定时器，再setTimeout一个新的定时器延迟一会执行，就这样。 代码实现 明白了原理，那就可以在代码里用上了，但每次都要手动去新建清除定时器毕竟麻烦，于是需要封装。在《JavaScript
javascript事件节流
Lysa_snow的博客
11-29 1123
比较常用的： 1.标志变量法： 设置一个开关变量 开始可以设置为true 并且只有当变量为true的时候才能执行某事件，触发事件后立即设置变量为false（这是我工作中比较常用的方法，简单容易实现，不容易出错） 2.函数节流： 思想就是 指某些代码不可以在没有间断的的情况下连续重复执行。 第一次调用函数 创建一个延时器 指定时间间隔后触发事件；第二次执行该函数时会清除之前设定的延时器
js:防抖动与节流
热门推荐
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
03-15 2万+
针对一些会频繁触发的事件如scroll、resize，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能。因此针对这类事件要进行防抖动处理： 它的做法是限制下次函数调用之前必须等待的时间间隔。正确实现 debouncing 的方法是将若干个函数调用合成 一次，并在给定时间过去之后仅被调用一次。// 将会包装事件的 debounce 函数 function deboun
JavaScript 节流函数 throttle 详解
weixin_34381666的博客
06-26 1138
原文：https://keelii.github.io/2016/06/11/javascript-throttle/ 在浏览器 DOM 事件里面，有一些事件会随着用户的操作不间断触发。比如：重新调整浏览器窗口大小（resize），浏览器页面滚动（scroll），鼠标移动（mousemove）。也就是说用户在触发这些浏览器操作的时候，如果...
js 截流
dengpengquan的博客
04-12 1747
var isEnable=true; form.on('submit(search)', function(data){ if(!isEnable){ return; } isEnable=false; setTimeout(function(){ console.log("函数节流测试");...
js 防抖和截流
rgpbrave的博客
07-22 387
函数防抖节流 防抖 //搜索监听响应 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时 var timer; window.onscroll=function(){ if(timer){ clearTimeout(timer) } timer = setTimeout(function(){ console.log("哈哈") },2000); } 节流 //滚动事件
JS 截留(throttle)&去抖(debounce)
user_mo的博客
05-23 1017
在开发中会遇到页面操错频率很高的事件或者连续的事件，如果不进行性能的优化，就会出现页面卡顿的现象eg:    鼠标事件:mousemove/mouseover/mouseWheel...    键盘事件:keypress/keyput/keydown.........为了解决这类问题，常用的方法就是 throttle 和debounce。 两者都是用来控制某个函数在一定时间内执行多少次的解决方案。...
js平滑滚动回到顶部
牧童
06-10 811
优先使用 requestAnimationFrame实现。 实验中发现，IE中的requestAnimationFrame 对象，在页面载入的时候，似乎是不可用的。 所以在 domContentLoaded事件以后再读取，才是安全的。 [code="js"] //没有输出! console.log(window.requestAnimationFrame || window.msRe...
JavaScript实现节流防抖
最新发布
07-25
JavaScript中可以使用定时器来实现节流和防抖的效果。下面是一些基本的实现示例： 1. 节流实现： ```javascript function throttle(func, delay) { let timer = null; return function() { if (!timer) { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值