为什么我的js function中的代码不起作用了？

最新推荐文章于 2023-11-25 10:41:29 发布
原创 最新推荐文章于 2023-11-25 10:41:29 发布 · 7.7k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#function #javascript #浏览器 #编程

博客讲述了JS代码不起作用的问题，function中的代码无效，但直接onClick管用，window.alert也可能因格式出错。强调script标签必须有type=\text/JavaScript\，否则浏览器可能无法识别，提醒要养成良好编程习惯。

为什么我的js代码不起作用了？function { ... }中的代码无效，直接onClick＝" ... "又管用了，难道window.alert("")也会有错？挠了半天的脑袋，其实很有可能因为格式不对喔

<script language="JavaScript" type="text/JavaScript">
<!--
    ...
//-->
</script>

必须要有type="text/JavaScript"，别觉得麻烦图省事，不然，浏览器可能认不出来

不是你的代码有问题，还是你的代码有问题

 养成良好的编程习惯，嗯

JavaScript运行没有效果是怎么回事？
laugh666的博客
09-23 1122
我们可以通过检查语法、确保变量在正确的作用域中、处理异步操作和进行兼容性处理来解决这些问题。在这个例子中，setTimeout函数会在2秒后执行回调函数，但是在这之前，"代码继续执行"会被立即打印出来。如果我们希望在异步操作完成后执行特定的代码，可以将需要执行的代码放在回调函数中，或者使用Promise和async/await方式进行处理。为了解决这个问题，我们需要确保变量在正确的作用域中声明和使用。如果需要在函数外部访问一个变量，可以考虑将其声明在函数外部或者使用返回值来传递数据。
useEffect中防抖为什么不起作用？react hooks中如何写防抖？
清颖的博客
08-15 3175
防抖不起作用的原因：useEffect 会在每轮渲染结束后执行，在state发生改变时，也会重新执行。解决：这里要使用ref保存防抖函数，防止触发efect函数时被重新生成。本文还可以学习到如何自定义hooks。......
JS代码不起作用解决方法
weixin_45059888的博客
02-07 3759
JS代码不起作用解决方法确定js文件是否引入确定js函数与参数以及变量填写是否正确以上做好后还不行的话，清除缓存，清除缓存，清除缓存 确定js文件是否引入 <script type="text/javascript" src="/js/xxx.js"></script> 确定js函数与参数以及变量填写是否正确 以上做好后还不行的话，清除缓存，清除缓存，清除缓存 ...
写的js代码不执行的原因
Xyxy95215的博客
05-29 2800
由于自己写的js引入了jquery,所以引入了jquery如下： <html> <head> <script type="text/javascript" src="static/js/jquery-3.6.0.js" /> <script type="text/javascript"> $(function(){ console.log("开始自定义的js"); 由于时ide自动生成的 &.
js代码不生效的解决方案
Hcy_code的博客
12-14 6109
js代码不生效的解决方案： 确保你的js代码没有错误且导入其它js的路径正确的情况下，你触发某个事件，js代码不执行。你可以尝试把js代码放置在body标签的最后位置，再刷新下，看看能不能运行。 ...
为什么js代码块有时候不起作用，需要放在body标签中
AsheAndWine的博客
12-29 8244
MDN中的解释： 以下通过分析举例 document 对象的集合对象 来发现js代码位置的问题 参考document对象集合方法：  http://blog.youkuaiyun.com/asheandwine/article/details/78148842 接下来通过一个例子说明上述集合对象的用法： 向网页中设计两个表单并输出其 name 属性：
在textarea中屏蔽js的某个function的javascript代码
12-12
有一个textarea，我想在这焦点在这个textarea中的时候屏蔽某个function， 就是使这个function失效，移出焦点后重新使其有效，请问该怎样实现？？？ 1楼 在你的那个函数里通过 document.activeElement 得到当前...
JS中注入eval, Function等系统函数截获动态代码
12-12
现在很多网站都上了各种前端反爬手段，无论手段如何，最重要的是要把包含反爬手段的前端javascript代码加密隐藏起来，然后在运行时实时解密动态执行。 动态执行js代码无非两种方法，即eval和Function。那么，不管...
精选资源
js代码-JS中对函数使用toString方法直接返回该function的源代码
07-16
在JavaScript（JS）中，`toString`方法是一个内置的方法，可以用于对象的转换，当它应用于函数对象时，它提供了一种独特的方式来获取该函数的源代码文本。这个功能对于调试、学习或复制函数的定义非常有用。让我们...
精选资源
javascript匿名函数中的’return function()’作用
01-19
我最近看到很多javascript代码,看起来我错了.在这种情况下,我应该建议哪种更好的代码模式？我将重现我所看到的代码和每个代码的简短说明： 代码块#1 该代码不应该评估内部函数.程序员会因为代码应该运行而感到困惑. ...
$(function(){});里的方法无效问题
h254931252的博客
10-16 8562
$(function(){})已经是一个匿名函数了，在里面定义的函数已经是私有了，不能全局访问。把函数定义在全局，也就是function外面，这样外部才能调用。
页面加载不全，检查页面代码发现代码缺少/js不能起作用
m0_56965737的博客
09-06 687
页面加载不全
js代码从页面移植到文件中失效或js代码修改后不起作用的解决办法
liuyun的专栏
07-16 5635
最近在做关于网站的项目，总是发生这样的问题    写的javascript代码在页面上没有问题，但是将js代码移植到.js的文件中，在页面上进行调用，总是出现失效等错误    另外修改后的js代码，重新刷新网页仍然不起作用 经过大量搜索并经过验证，可以用下面方法来解决   将js代码封装到js文件中失效的原因可能是js文件中存在中文注释，导致在执行的时候中断，在js文件尽量不要写中文注释
svg用$('parent').on('click','child',function(){console.log(1212);})时不起作用
sunny327的专栏
05-23 558
今天在给svg图标绑定事件时，发现点击svg图标没反应，控制台也不报错。经过调试时发现给svg绑定事件时不起作用，给Svg图标外面再包裹一个i标签，把事件绑定到i标签时即可。...
JavaScript onclick无效果的原因之一
自由如风的博客
11-25 1946
使用let使用闭包直接通过document获取元素然后修改，不要使用i写在最后，AI牛逼。
解决js添加元素后onclick无效问题，解决onclick无效问题
gusijin的博客
10-29 5021
解决js添加元素后onclick无效问题，解决onclick无效问题
javascript不起作用了
过客的博客
05-20 1529
javascript不起作用了.....真的一脸懵逼... 几经排查找出了原因，后面的js代码使用了jquery，而jquery.js咩有被引入，导致前面咩有使用jquery的javascript也出现了问题！！！
js中function无响应
qq_45128278的博客
03-17 201
我现在还不知道是什么原因，但是加上个this以后的解决了。 错误： <li class="col-xs-4"><a href="#" onclick="start_socket" id="socket"><span class="glyphicon glyphicon-heart"></span> &nbsp;开启websocket</...
js的function为什么不能执行？
qq_37805183的博客
07-13 7907
今天调用function的时候，一直不能成功，显示方法没定义，一直找不到原因。后来问同事才知道，function是一个一个执行的，如果前面的function有错，会导致后面的function不能执行。令人郁闷的是，前一个function明明能正常使用，所以作为新手，一般可能会忽略这个。解决方法是，按f12打开开发者工具，先看看是什么报错，然后再看看source的内容，看看有没有红线报错，这样往往能
自执行代码是什么？跟正常代码有什么区别？讲讲js
最新发布
08-27
<think>我们正在讨论JavaScript中的自执行函数（立即执行函数表达式，IIFE）。根据引用[1]和引用[4]，自执行函数是定义后立即执行的函数。这种模式在JavaScript中非常常见，主要用于创建独立的作用域，避免变量污染全局作用域。 ### 自执行代码的定义 自执行代码（通常称为立即执行函数表达式，IIFE）是指**在定义的同时立即执行的JavaScript函数**。它的基本结构如下： ```javascript (function() { // 函数体 })(); ``` 或者： ```javascript (function() { // 函数体 }()); ``` ### 自执行函数与正常函数的区别 1. **执行时机** - 自执行函数：在定义后**立即执行** - 正常函数：需要显式调用才会执行 2. **作用域隔离** - 自执行函数：创建一个**独立的作用域**，内部变量不会污染全局命名空间[^1] - 正常函数：在调用时才会创建作用域 3. **返回值处理** - 自执行函数：可以通过返回值初始化模块（例如模块模式） ```javascript const counter = (function() { let count = 0; return { increment: () => count++, get: () => count }; })(); ``` - 正常函数：需要显式调用才能获取返回值 4. **避免变量提升干扰** 在ES5之前，使用自执行函数可以避免`var`变量提升带来的问题： ```javascript // 传统写法可能受变量提升影响 var x = 1; function outer() { console.log(x); // 输出undefined而非1 var x = 2; } // 使用IIFE隔离作用域 (function() { var x = 2; // 不会影响外部作用域 })(); ``` ### 自执行函数的变体与注意事项 根据引用[4]，自执行函数有三种主要写法： 1. **经典写法** ```javascript (function() {})(); ``` 2. **运算符引导写法** ```javascript !function(){}(); +function(){}(); ``` 3. **带参数形式** ```javascript (function(a, b){ console.log(a + b); })(1, 2); ``` > **重要注意事项**： > 当多个自执行函数连续书写时，必须用分号隔开，否则会导致解析错误[^4]： > ```javascript > // 错误示例（缺少分号） > (function(){})() > (function(){})() // 被解释为第一个函数的调用参数 > > // 正确写法 > (function(){})(); > (function(){})(); > ``` ### 自执行函数的现代替代方案 在ES6及更高版本中，由于块级作用域(`let`/`const`)和模块系统的出现，IIFE的使用场景有所减少： ```javascript // 使用块级作用域替代IIFE { let privateVar = "内部变量"; console.log(privateVar); } // privateVar在此处不可访问 ``` ### 总结对比表 | 特性 | 自执行函数(IIFE) | 正常函数 | |---------------------|-----------------------------|-------------------------| | 执行时机 | 定义后立即执行 | 需要显式调用 | | 作用域 | 创建独立作用域 | 依赖调用位置作用域 | | 返回值利用 | 可直接赋值给变量 | 需通过调用获取返回值 | | 变量污染控制 | 有效隔离内部变量 | 无自动隔离机制 | | ES6+替代方案 | 块级作用域/模块系统 | 无直接替代 | ### 典型应用场景 1. **模块化开发** 在ES6模块普及前，IIFE是实现模块模式的核心技术[^1]： ```javascript const MyModule = (function() { const privateVar = '私有变量'; return { publicMethod: () => console.log(privateVar) }; })(); ``` 2. **循环变量捕获** 解决循环中异步操作导致的变量共享问题： ```javascript for (var i = 0; i < 5; i++) { (function(j) { setTimeout(() => console.log(j), 100); })(i); } // 输出0,1,2,3,4（而非5个5） ``` 3. **第三方库隔离** 常见库（如jQuery）使用IIFE确保全局命名空间清洁： ```javascript (function(global) { global.$ = function() { /* ... */ }; })(window); ``` §§ 相关问题 §§ 1. 如何在ES6中使用块级作用域替代IIFE？ 2. 自执行函数中的`this`指向什么？ 3. 为什么现代前端框架（如React、Vue）中IIFE使用变少了？ 4. 如何用箭头函数实现自执行效果？ [^1]: 自执行函数在模块化开发中的作用 [^4]: 自执行函数的写法注意事项</think>### JavaScript自执行代码的定义及与正常代码的区别 #### 1. **自执行代码的定义** 自执行代码（立即执行函数表达式，IIFE）是**定义后立即执行的函数表达式**，其核心特点是： - 在定义时立即执行，不需要额外调用 - 基本语法结构：`(function(){...})()` 或 `(function(){...}())` - 主要用途：创建独立作用域，避免变量污染全局命名空间[^1][^4] ```javascript // 自执行函数示例 (function(msg) { console.log(msg); // 立即输出"Hello" })("Hello"); ``` #### 2. **与正常代码的关键区别** | 特性 | 自执行代码 | 正常代码 | |---------------------|-------------------------------|-----------------------------| | **执行时机** | 定义后立即执行 | 需要显式调用 | | **作用域** | 创建独立闭包作用域 | 默认使用当前作用域 | | **变量生命周期** | 内部变量执行后自动销毁 | 变量持续存在直到作用域结束 | | **返回值利用** | 可直接返回结果给变量 | 需通过调用获取返回值 | | **典型用途** | 模块化封装、避免全局污染 | 通用功能实现 | #### 3. **核心区别详解** **(1) 作用域隔离机制** ```javascript // 自执行代码：内部变量不会污染全局 (function() { var privateVar = "内部变量"; // 外部无法访问 })(); // 正常代码：变量暴露在全局 function normalFunc() { publicVar = "全局变量"; // 成为window对象的属性 } normalFunc(); console.log(window.publicVar); // 输出"全局变量" ``` **(2) 执行控制差异** ```javascript // 自执行函数：立即执行且仅执行一次 const result = (function(x) { return x * 2; // 立即计算并返回结果 })(5); console.log(result); // 10 // 正常函数：需主动调用 function normalDouble(x) { return x * 2; } console.log(normalDouble(5)); // 需显式调用 ``` **(3) 闭包特性应用** ```javascript // 自执行函数创建计数器模块 const counter = (function() { let count = 0; // 私有变量 return { increment: () => ++count, get: () => count }; })(); counter.increment(); // count=1 counter.increment(); // count=2 console.log(counter.get()); // 输出2 // 外部无法直接访问count变量 ``` #### 4. **特殊注意事项** - **分号必需**：连续多个IIFE时需用分号分隔，避免解析错误[^4] ```javascript ;(function(){...})() // 开头分号确保安全 ;(function(){...})() ``` - **箭头函数IIFE**：ES6+中的新写法 ```javascript (() => { console.log("箭头函数IIFE"); })(); ``` - **参数传递**：支持立即传入参数 ```javascript (function(a, b) { console.log(a + b); // 立即输出3 })(1, 2); ``` #### 5. **现代替代方案** 虽然IIFE在ES5时代非常重要，但ES6+提供了更优选择： - **块级作用域**：使用`let`/`const`替代 ```javascript { let privateVar = "块作用域变量"; // 外部无法访问 } ``` - **模块系统**：通过`import`/`export`实现封装 ```javascript // module.js let count = 0; export const increment = () => ++count; // main.js import { increment } from './module.js'; ``` ### 总结对比 | **维度** | **自执行代码** | **正常代码** | |----------------|------------------------------|--------------------------| | 执行方式 | 定义即执行 | 需显式调用 | | 作用域控制 | 创建独立闭包作用域 | 依赖当前作用域 | | 内存管理 | 执行后内部变量可被回收 | 变量持续存在 | | 模块化支持 | 是（ES5方案） | 否 | | 代码封装性 | 强 | 弱 |
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值