有很多朋友写 jQuery 时发现自己的方法没有错但是传递过来的值怎么打印都是 undefined (不得不说这是一件很恶心的事)
那么你的代码可能写得和下面列子有相似的毛病
拿上篇递归的列子来举例,但这次我这么写
<html> <body> <div class="container"> <div class="a1"> <div class="a2"> <div class="a3" onclick="handleClick(this)"> ..... </div> </div> </div> </div> <div class="container"> <div class="b1"> <div class="b2"> <div class="b3" onclick="handleClick(this)"> ..... </div> </div> </div> </div> </body> </html>
我还是想给类名为"a3"的元素添加点击事件，一样改变父节点类名为"container"元素的背景
<script> var handleClick = function(elem) { var container = findElem(elem) //顺便打印一下元素 console.log(container) container.css({ 'background-color': '#000000' }) } var findElem = function(elem) { //当传入元素类名不等于container的时候 if($(elem)[0].className != "container") { //将该元素的所有父节点传入此方法 findElem($(elem).parent()) }else { //如果元素类名等于"container"返回该元素 return $(elem) } } </script>
控制台又打印 undefined 了 很气我的方法明明没问题😠
这里我用我的想法来为大家解释一下，大家都知道 javascript 是从上到下执行的 这里我们用 findElem 方法来返回寻找到的元素，但是 findElem 方法需要一遍一遍递归它不是与 handleClick 方法同步的，所以 handleClick 等不及了 没等到 findElem 返回元素就打印了 所以这里打印了 undefined
那我们该如何解决呢？
这里就涉及到了异步的问题，jQuery 替我们封装了一个方法叫做 $.Deferred(),它起了一个延期的作用,我们这么写
<script> //定义一个全局变量 var container var handleClick = function(elem) { //当findElem方法完成后 $.when(findElem(elem)).done(function() { //改变"container"的背景颜色 container.css({ 'background-color': '#000000' }) //顺便打印一下元素 console.log(container) }) } var findElem = function(elem) { var dtd = $.Deferred() //当传入元素类名不等于container的时候 if($(elem)[0].className != "container") { //将该元素的所有父节点传入此方法 findElem($(elem).parent()) }else { //如果元素类名等于"container"返回该元素 container = $(elem) dtd.resolve() return dtd.promise() } dtd.resolve() return dtd.promise() } </script>
事件成功触发，元素也正常打印出来了
到此我们的异步问题就解决了
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于