js中的return、return false、continue区别

最新推荐文章于 2022-03-17 20:06:30 发布

Hathaway2114

最新推荐文章于 2022-03-17 20:06:30 发布

阅读量613

点赞数 1

分类专栏：前端文章标签： return return false

本文链接：https://blog.csdn.net/Hathaway2114/article/details/88741121

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天敲代码偶然间自己写出来了个bug 比较困惑，明明点击提交会出现一个Dialog，Dialog点击确定才能提交点击取消就不可以提交，结果自己写出来后不管确定还是取消都可以提交，em...明明思路清晰明了为啥不对呢？于是开始检查！首先在提交方法里用了async await等我弹框出现，弹框另写了一个函数返回个promise，之后只须点击，确定：resolve(true); 取消：resolve(false);

然后在主函数里做了个判断：

let aa =  await this.ErrorBox();
 if(!aa){
      return false;
 }
....//后续代码

我原本以为呵这么个简单代码分分钟搞定结果呵呵哒，明明点击了取消但是后续代码执行了！！！！woc？exo me？什么情况？后来删除了false 只留下return 分分钟就ok了哇塞这个大坑让我踩得酸爽！废话就不多说了赶紧来瞅瞅什么原因他俩什么情况！

return 表达式 -——w3c中的解释：

语句结束函数执行，返回调用函数，而且把表达式的值作为函数的结果。（也就是：当代码执行到return语句时，函数返回一个结果就结束运行了，return后面的语句根本不会执行。）

举个栗子：

function myFun() {

console.log("Hello");

return "World";

console.log("byebye")

}

myFun();

　上面代码输出“Hello”到控制台，返回“World”，但没有输出“byebye”，因为函数遇到return语句就退出了。　

1.return false：

　　在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页。

  js中return false作用一般是用来取消默认动作 / 阻止提交表单 / 阻止继续执行下面的代码。

  注意：return false 只在当前函数有效，不会影响其他外部函数的执行。
  举个栗子说明：

function a（）{
   if（True）
       return false;
    }
//这是没有任何问题的，如果改成这种
function Test（）{
   a（）;
   b（）;
   c（）;
}

即使a函数返回return false 阻止提交了，但是不影响 b（）以及 c（）函数的执行。在Test（）函数里调用a()函数，那面里面return false 对于Test（）函数来说，只是相当于返回值。而不能阻止Test（）函数执行。return false 返回错误的处理结果，终止处理。 就相当于终止符，

2. return true：

　　return true 返回正确的处理结果，就相当于执行符。

3. return：把控制权返回给页面。

关于阻止浏览器执行默认行为

　　大家对事件冒泡都很熟悉了吧，我想表达的是大部分事件都是先在初始DOM上触发，然后再通过DOM树往上，在每一级父元素上触发，事件不会在兄弟节点或是子节点上冒泡（当事件向下冒泡时，我们叫它事件捕捉（event capturing))，

　 “return false”之所以被误用的如此厉害，是因为它看起来像是完成了我们交给它的工作，浏览器不会再将我们重定向到href中的链接，表单也不会被继续提交，但这么做到底有什么不对呢？

划重点了！！！

"return false"到底做了什么？

　　当你每次调用”return false“的时候，它实际上做了3件事情：

　　•event.preventDefault();
　　•event.stopPropagation();
　　•停止回调函数执行并立即返回。

　　“等等”，你叫了起来！我只是想让浏览器停止继续执行默认行为而已，我不需要它去做另外2件事。

　　这3件事中用来阻止浏览器继续执行默认行为的只有preventDefault，除非你想要停止事件冒泡，否则使用return false会为你的代码埋下很大的隐患，让我们通过一个真实的例子来看看这样的误用会造成什么后果：

<div class="post">  
    <h2><a href="http://jb51.net">My Page</a></h2>  
    <div class="content">  
        Teaser text...  
     </div>  
</div>  
<div class="post">  
    <h2><a href="http://jb51.net">My Other Page</a></h2>  
    <div class="content">  
        Teaser text...  
    </div>  
</div>

现在假设我们想要在用户点击文章标题时，将文章动态载入到div.contentd中：

jQuery(document).ready(function ($) {

$("div.post h2 a").click(function () {

var a = $(this),

href = a.attr('href'), // Let jQuery normalize `href`,

content = a.parent().next();

content.load(href + " #content");

return false; // "cancel" the default behavior of following the link

});

　　这段代码可以正常工作（至少目前是），但如果我们顺着这个思路继续，如果我想要在用户点击了一个div.post元素（或者任何一个它的子元素）时，给它加上一个active类，我就需要给div.post增加了一个click回调：

var posts = $("div.post");

posts.click(function () {

posts.removeClass("active");

$(this).addClass("active");

});

　　现在，如果我们点击一个帖子的标题，这段代码会工作吗？答案是不会，因为我们在标题的click回调里使用了return false而不是我们应该使用的，”return false“等于event.preventDefault();加event.stopPropagation();，所以事件冒泡就被终止了，click事件不会被冒泡到div.post上，我们为它添加的事件回调当然也就不会被调用了。

那先来了解下什么是preventDefault():

preventDefault()

　　大多数情况下，当你使用return false时，你其实真正需要的是e.preventDefault()。要使用e.preventDefault，你需要确保你传递了event参数到你的回掉函数中（在这个例子里，就是那个e）：

$("a").click(function (e) {

// e == our event data

e.preventDefault();

});

　　它会替我们完成所有工作，但不会阻止父节点继续处理事件，要记住，你放在代码中的限制越少，你的代码就越灵活，也就越易于维护。

stopPropagation()

定义：不再派发事件。

终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

　　该方法将停止事件的传播，阻止它被分派到其他 Document 节点。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

那什么时候用 return false？

　　只有当你同时需要preventDefault和stopPropagation，并且你的代码可以接受直到你的回调执行完成才停止执行浏览器的默认行为，那你就可以使用”return false“。

敲黑板了！！

return、continue、break 、continue 的区别

return ：

(1) return 从当前的方法中退出,返回到该调用的方法的语句处,继续执行。

(2) return 返回一个值给调用该方法的语句，返回值的数据类型必须与方法的声明中的返回值的类型一致。

(3) return后面也可以不带参数，不带参数就是返回空，其实主要目的就是用于想中断函数执行，返回调用函数处。

continue :

　　终止本次循环的执行，即跳过当前这次循环中continue语句后尚未执行的语句，接着进行下一次循环条件的判断。

　它不是退出一个循环，而是开始循环的一次新迭代。

continue语句只能用在while语句、do/while语句、for语句、或者for/in语句的循环体内，在其它地方使用都会引起错误！

break :

（1）break在循环体内，强行结束循环的执行，也就是结束整个循环过程，不在判断执行循环的条件是否成立，直接转向循环语句下面的语句。

（2）当break出现在循环体中的switch语句体内时，其作用只是跳出该switch语句体。

本文知识大部分转自https://www.cnblogs.com/zhangym118/p/6438702.html 这个大佬的总结我觉得灰常棒就偷偷拿来用了！没看懂的去看原文哈！

Hathaway2114

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js中的return、return false、continue区别

今天敲代码偶然间自己写出来了个bug 比较困惑，明明点击提交会出现一个Dialog，Dialog点击确定才能提交点击取消就不可以提交，结果自己写出来后不管确定还是取消都可以提交，em...明明思路清晰明了为啥不对呢？于是开始检查！首先在提交方法里用了async await等我弹框出现，弹框另写了一个函数返回个promise，之后只须点击，确定：resolve(true); 取消：resolve...
复制链接

扫一扫