{"id":33164,"date":"2023-02-05T01:28:00","date_gmt":"2023-02-04T19:58:00","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/"},"modified":"2023-02-05T01:28:00","modified_gmt":"2023-02-04T19:58:00","slug":"solved-a-cleaner-better-way-to-write-jquery-function-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/","title":{"rendered":"[Solved] A cleaner\/better way to write jQuery function [closed]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

Well, for one continuously querying for the same DOM objects is not only repetitive, but costly. You should always capture your query results with a variable. Doing this alone, will clean up your code:<\/p>\n

 var $tlb = jQuery('#top-link-block');\n<\/code><\/pre>\n
NOTE: I suggest prefixing your JQuery result variable with a $ to remind you that it is a JQuery wrapper object and not a traditional DOM object.<\/p>\n
Now, you can just use this variable over and over:<\/p>\n
 if ($tlb.offset...)...\n<\/code><\/pre>\n
In addition, you are using this value:<\/p>\n
 jQuery('#footer-wrapper').offset().top\n<\/code><\/pre>\n
more than once, so I’d save that value in a variable as well:<\/p>\n
 var $footWrapOffsetTop = jQuery('#footer-wrapper').offset().top;\n<\/code><\/pre>\n
And then you can use that where needed without having to query the object and extract the offset.top value repeatedly.<\/p>\n
Also, this:<\/p>\n
 jQuery(window)\n<\/code><\/pre>\n
is wasteful because since you are not capturing the result of the query and only using the query so that you can attach an event handler to window. Using JQuery to get a reference to the global window object does nothing more than perform a lookup on an object that is always available. Just use:<\/p>\n
 window.addEventListener(\"scroll\", function(){...});\n<\/code><\/pre>\n
The only benefit for querying for window would be to take advantage of JQuery’s wrapped-set functions, but you aren’t doing that here.<\/p>\n
Here’s the cleaned up version (using best-practices):<\/p>\n
    scrollToTop: function () {\n\n      var offset = 160;\n      var duration = 500;\n\n      \/\/ Result is JQuery wrapped-set object:\n      var $tlb = jQuery('#top-link-block');\n\n      \/\/ Result is top value:\n      var footWrapOffsetTop = $('#footer-wrapper').offset().top;\n\n      window.addEventListener('scroll', (function() {\n\n        \/\/ Don't take advantage of optional curly braces with blocks\n        \/\/ of only one statement. It can lead to bugs.\n        if (window.scrollTop() > offset){\n            $tlb.fadeIn(duration) : $tlb.fadeOut(duration);\n        }\n\n        if ($tlb.offset().top + $tlb.height() >= footWrapOffsetTop - 10) {\n            $tlb.css('position', 'absolute');\n        }\n\n        if ($(document).scrollTop() + window.innerHeight < footWrapOffsetTop){\n            $tlb.css('position', 'fixed');\n        }\n\n        if ($('#fixed-toolbar-menu')[0]){\n            $tlb.css({ bottom: 150 });\n        }\n      });\n<\/code><\/pre>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            1<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved A cleaner\/better way to write jQuery function [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] Well, for one continuously querying for the same DOM objects is not only repetitive, but costly. You should always capture your query results with a variable. Doing this alone, will clean up your code: var $tlb = jQuery(‘#top-link-block’); NOTE: I suggest prefixing your JQuery result variable with a $ to remind you that it … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[333,388],"class_list":["post-33164","post","type-post","status-publish","format-standard","hentry","category-solved","tag-javascript","tag-jquery"],"yoast_head":"\n[Solved] A cleaner\/better way to write jQuery function [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] A cleaner\/better way to write jQuery function [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Well, for one continuously querying for the same DOM objects is not only repetitive, but costly. You should always capture your query results with a variable. Doing this alone, will clean up your code: var $tlb = jQuery('#top-link-block'); NOTE: I suggest prefixing your JQuery result variable with a $ to remind you that it ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-04T19:58:00+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] A cleaner\/better way to write jQuery function [closed]\",\"datePublished\":\"2023-02-04T19:58:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/\"},\"wordCount\":223,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"javascript\",\"jquery\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/\",\"name\":\"[Solved] A cleaner\/better way to write jQuery function [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2023-02-04T19:58:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] A cleaner\/better way to write jQuery function [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] A cleaner\/better way to write jQuery function [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] A cleaner\/better way to write jQuery function [closed] - JassWeb","og_description":"[ad_1] Well, for one continuously querying for the same DOM objects is not only repetitive, but costly. You should always capture your query results with a variable. Doing this alone, will clean up your code: var $tlb = jQuery('#top-link-block'); NOTE: I suggest prefixing your JQuery result variable with a $ to remind you that it ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/","og_site_name":"JassWeb","article_published_time":"2023-02-04T19:58:00+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] A cleaner\/better way to write jQuery function [closed]","datePublished":"2023-02-04T19:58:00+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/"},"wordCount":223,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["javascript","jquery"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/","name":"[Solved] A cleaner\/better way to write jQuery function [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2023-02-04T19:58:00+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-a-cleaner-better-way-to-write-jquery-function-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] A cleaner\/better way to write jQuery function [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/33164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=33164"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/33164\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=33164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=33164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=33164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}