JS 实现原生防抖函数时遇到的onclick和行内onclick的区别问题

最新推荐文章于 2024-04-20 16:07:21 发布

Blacktdfj

最新推荐文章于 2024-04-20 16:07:21 发布

阅读量852

点赞数 1

分类专栏： JS原生手写实现文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/weixin_45543674/article/details/121578034

版权

在html的onclick行内添加一个方法，每次触发点击事件都会执行该方法
看似没什么问题，但如果这个方法返回的是一个方法呢，如果我们想让返回出来的方法得到执行，就要在行内的末尾加上一对 ()
结果就是每次执行返回出来的内部方法都是新的，闭包？我们想要使用的闭包莫得了。

解决方案 2种：

在script标签中给dom元素的onclick赋值这个方法的执行，返回出来的内部方法就可以应用闭包
使用addEventListener给dom元素添加click事件，赋值依然为外层方法的执行

<body>
  <button id="btn">按钮

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Blacktdfj

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

自己制作一个简易的防抖来阻止input的onchage和button的click函数同时触发

前端李小白的博客

12-19

711

最近遇到了一个场景，如图 input的onChange执行的函数和button执行的函数是一个相同的函数，这样就会造成一个问题，如果我修改了input里面的内容，然后同时点击button的话，那么那个函数就会执行两次，造成不友好的体验。所以自制了一个简易的防抖来阻止这个函数在0.5s内同时执行两次。代码如下: <body> <div> <button ...

Javascript 行内事件编写

卋舉

10-16

463

按钮 button; 点击 onclick; 文档 document; 内 inner <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>行内事件编写 onclick=""</t

2 条评论您还未登录，请先登录后发表或查看评论

行内onclick使用遇坑--------作用域与传入字符串

weixin_30768175的博客

12-23

173

问题一：行内onclick触发的函数放在$(funtion(){})内报错，错误代码如下： 1 <input type="button" value="确定" onclick="say()"> 2 <script> 3 $(function(){ 4 function say(){ 5 ...

button执行onclick函数_从应用场景助你理解函数防抖与函数节流

weixin_39575054的博客

11-27

680

防抖(debounce)函数防抖(debounce)：当持续触发事件时，在设置的周期内没有再触发事件，事件处理函数才会执行一次，如果设定的周期没有结束，又一次触发了事件，就重新开始延时。为了有个直观的对比，我们先看下没有使用debounce技术的click事件：我们看到，当用户频繁点击button按钮时，控制台会频繁的输出结果，这种频繁调用事件处理程序，会加重浏览器的负担，导致用户体验非...

js使用onclick方法实现点击表格整行/列变色

h220801__zzl的博客

09-07

1788

js dom阶段学习作业

onclick行内传参

yangxiaohui-home

02-19

694

onclick行内传参------------>解决

原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)

10-21

在网页开发中，常常会遇到需要实现复选框（checkbox）的全选、全不选以及单个选择的功能。这里我们主要探讨如何使用原生JavaScript和jQuery来实现这一功能，同时考虑到行内点击选择的效果。本文将详细介绍两种实现...

原生js实现简单动画效果

linglingzi001的博客

04-12

1864

使用原生js实现简单动画效果实现动画效果可以用jQuery提供的animate方法，或一些插件来实现，但是随着前端组件化开发的流行， jQuery大量的DOM操作已经显得十分多余，正在逐渐从前端技术栈中被淘汰，下面我们使用原生js实现简单的匀速动画效果和缓动效果匀速动画实现水平移动 css样式 <style> #box { width: 10...

button执行onclick函数_函数节流，函数防抖

weixin_39907658的博客

11-28

276

函数节流与函数防抖的原理非常简单，都是巧妙地使用 setTimeout 来存放待执行的函数，从而达到目的——节约计算机资源。函数节流: 指定时间间隔内只会执行一次任务；函数防抖: 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。节流函数：可以把它理解成游戏中的CD冷却时间，当技能在冷却时间内的时候，我们就不能使用该技能。function 防抖函数：我们想象一个情景：当用户...

防抖节流用addEventListener生效，onclick不生效问题

最新发布

muxi229的博客

04-20

961

防抖问题解析：事件监听addEventLisenter防抖生效，onclick点击防抖无效问题

js防抖的一些疑问解答:为什么addEventListener调用防抖可以，onClick不行

halfgod的博客

09-02

1706

刚学习防抖/节流的时候就一直有一个疑问：为啥addEventListener调用防抖函数可以，但是我再HTML里写onClick方法就不行呢？百思不得其解，后来还是屈服了，用了addEventListener，但是后来学到了vue.....这下不能这么干了（因为vue不建议直接操作dom）懵圈了，在仔细整理闭包后才知道原因：这种防抖函数(生成器)的原理是防抖函数每执行一次返回一个受time变量控制的函数！上代码： /** * 防抖函数 * @param {*} func 回调函数必传...

关于js防抖的思路理解以及addEventListener和onclick调用防抖的区别的理解

zongmaomx的博客

10-21

985

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <but...

<a>标签响应onclick事件，防止页面跳动方法总结

日光海岸

02-10

649

最近在点击一个a链接时经常发现，如果有垂直滚动条的话页面经常跳到顶端，于是google了一下，知道了为什么，也找到了几个解决办法。总结一下，如果在实际应用中确实是要用到<a>标签来响应onclick事件的，那么就建议使用下面三种方法1.<a href="javascript:void(0)" onclick="doSomething()">test</a...

html中行内点击事件,javascript - 关于行内元素onclick事件，为什么会出错?

weixin_35275922的博客

06-09

899

给我你的怀抱2017-07-05 10:39:039楼写成这样看看$(function() {leftMenu();function show() {alert('hhhhhhhh');}function leftMenu() {var html = 'click me'$('#box').append(html);}})直接调show()它其实是立即执行的，如果写成onclick="show()...

简单的方式实现防抖和节流（简单）

a1784954994的博客

08-22

191

简单实现防抖节流

通俗易懂的防抖和节流

weixin_46468143的博客

02-09

2172

当我们为了避免频繁的触发回调导致大量的计算或请求等问题，我们需要用一些方法来处理，这个时候防抖和节流就出现了这两个东都与闭包的形式出现防抖什么是防抖？防抖：事件被触发n秒之后再执行函数，如果在n秒内再次触发就重新计时比如：点击一个按钮输出1 当没有做防抖的时候一直点就一直触发如果做了防抖点击之后两秒触发 2秒内再次点击就重新计时当停下来两秒之后会触发防抖函数 <button>防抖</butto> <script> let btn = docume

Js 三种绑定事件方式及区别

Superman_peng的博客

03-27

836

三种事件绑定方式 DOM里直接绑定事件 <button id="btn" onclick="submit()">提交</button> <script> function submit() { console.log('DOM click......'); }; </script> js代码里获取DOM元素进行事件绑定 <button id="btn">提交</button> <script&gt

js中click 和onclick之间的区别

m0_52358470的博客

09-26

6237

onclick和click

JS绑定事件的三种方法(简单易懂)

m0_74577714的博客

10-15

3883

相信大家都了解过事件，但如何给元素绑定事件，如何使用呢？让我为大家介绍三种绑定事件的方法吧！以下都是用点击事件(click)来做示范。

原生JavaScript实现Ajax异步请求详解

本文将探讨如何使用原生JavaScript实现Ajax异步请求，以及涉及到的跨域问题和数据同步问题。首先，创建一个Ajax请求的核心是实例化一个`XMLHttpRequest`对象。在所有支持XMLHttpRequest的浏览器中，可以通过以下...