Make the `for` loop wait for each function to resolve

Make the `for` loop wait for each function to resolve - javascript

Page 1:
function tempWindow(text)
{
var w = window.open('https://example.com/?data='+text, '_blank');
var t = setInterval(() => {
if(w.closed)
{
clearInterval(t);
return true;
}
}, 100);
}
var list = ['text1', 'text2', 'text3'];
for(var i=0;i<list.length;i++)
{
tempWindow(list[i]);//Each loop iteration must wait for each window to close
}
Temporary window:
(function(){
setTimeout(() => {
window.close();
}, 5000);
})();
The code on page 1 should open three windows and send to each of them the strings text1, text2, text3, stored in the variable data.
These windows must not be opened at the same time. For this, setInterval checks every 100 milliseconds if the previous window has already been closed.
Therefore, the second window can only be opened after closing the first one and so on.
I believe that the tempWindow function could return a promise and that using await a solution would be possible, but I don't know how to do that.

use that code. it will wait until window is close
function tempWindow(text) {
return new Promise(resolve => {
var w = window.open('https://example.com/?data=' + text, '_blank');
var t = setInterval(() => {
if (w.closed) {
clearInterval(t);
resolve(true);
}
}, 100);
})
}
var list = ['text1', 'text2', 'text3'];
for (var i = 0; i < list.length; i++) {
await tempWindow(list[i]);//Each loop iteration must wait for each window to close
}
make sure loop code is inside async function like that
async testFunction(){
var list = ['text1', 'text2', 'text3'];
for (var i = 0; i < list.length; i++) {
await tempWindow(list[i]);//Each loop iteration must wait for each window to close
}
}
call function like this testFunction()

Related

How pause a loop in JavaScript?

Can anyone tell me why I'm not being able to pause the loop? The idea is to pause it for 5 seconds and then restart it. The code is bellow. Thanks!
let pics = [{
name: 'picture',
picture: 'https://images.unsplash.com/photo-1491555103944-7c647fd857e6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
number: 1
},
{
name: 'picture',
picture: 'https://images.unsplash.com/photo-1495837174058-628aafc7d610?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80',
number: 2
},
{
name: 'picture',
picture: 'https://images.unsplash.com/photo-1474314881477-04c4aac40a0e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
number: 3
}
];
let pauseLoop = false;
function displayImage() {
let display = document.querySelector('#display');
let button = document.querySelectorAll('.pic');
for (let i = 0; i < button.length; i++) {
button[i].addEventListener('click', function() {
display.style.backgroundImage = "url('" + pics[i].picture + "')";
// THIS IS SUPPOSED TO PAUSE THE LOOP FOR 5 SECONDS AND THEN RESTART THE LOOP
pauseLoop = true;
setTimeout(function() {
pauseLoop = false;
console.log(pauseLoop)
}, 5000);
})
}
}
// create list inside nav
let createGalleryMeny = () => {
let nav = document.querySelector('#nav');
for (let i = 0; i < pics.length; i++) {
let img = document.createElement('DIV');
img.style.backgroundImage = "url('" + pics[i].picture + "')";
img.className = 'pic';
nav.appendChild(img)
}
}
// loop through every picture
function loopPics() {
let number = 0;
let display = document.querySelector('#display');
display.style.backgroundImage = "url('" + pics[pics.length - 1].picture + "')";
if (pauseLoop !== true) {
setInterval(function() {
display.style.backgroundImage = "url('" + pics[number].picture + "')";
number++
if (number === pics.length) {
number = 0
}
}, 2000)
}
}
(() => {
createGalleryMeny();
loopPics();
displayImage()
})();
This code is just a simple gallery and I wanna have the option to pause the loop when one clicks any picture in the gallery, display the clicked picture and restart the loop after 5 seconds.

Pause is not something you should want in Javascript, this blocks your whole code. You should create a function that will execute the code you want to repeat after X seconds. It can be a function which can call itself. If you do want to "wait" for a few seconds on a line of code it is possible.
Make the function async:
async function displayImage() {
And then wait for 5 seconds:
await new Promise(resolve => setTimeout(resolve, 5000));
But your code is binding a click in the for loop, and you want to reexecute that code part. Which will result in multiple click handlers on 1 button depending on the timing. Which will probably not result in what you want.

How can I reuse a function properly?

I try to make 3 basic slideshow.
I made this code for the first one and wanted to use it on the other 2 as well with the New slideS() method and with some parameter changing.But it's not working,even the first function is'nt working if I put parameter in it.
Can somebody explain me why is this not working and how to fix it?Thanks beforehand!
var img = document.getElementById("asd");
var imgArr = ["1.jpg", "3.png", "3.png"];
var i = 0;
function slideS(a) {
a.src = imgArr[i];
if (i < imgArr.length - 1) {
i++;
} else {
i = 0;
}
setTimeout("slideS()", 1500);
}
slideS(img)

You could do something like this, using an object oriented approach:
function SlideShow(el, imagesArray, msDelay) {
this.el = el;
this.images = imagesArray;
this.delay = (msDelay) ? msDelay : 1000;
this.timer = null;
this.Run = function () {
var self = this;
var index = 0;
this.timer = setInterval(function(){
self.el.src = self.images[index++ % self.images.length];
}, this.delay);
}
this.Stop = function() {
this.timer = null;
}
}
var img = document.getElementById("asd");
var imgArr = ["1.jpg", "3.png", "3.png"];
var delay = 1500;
var ss = new SlideShow(img, imgArr, delay);
ss.Run();
...
ss.Stop();
Would that work for you? Then you are using pure functions and an object that can be used to start, stop, and manage any slide show.

I think you want like:
Remove setTimeout. And use setInterval:
setInterval(function(){
slideS(img)
},1500)

You could use a closure over the element and the array and use setInterval instead of setTimeout.
function slide(id, array) {
function swap() {
image.src = array[i];
i++;
i %= array.length;
}
var image = document.getElementById(id),
i = 0;
setInterval(swap, 1500);
}
slide('image1', ['http://lorempixel.com/400/200/', 'http://lorempixel.com/400/200/', 'http://lorempixel.com/400/200/']);
<image id="image1"></image>

I assume it works when the function doesn't take a parameter?
Then, the reason it would work with no parameter, but stop working with a parameter, is that the setTimeout tries to recursively call the function but doesn't pass a parameter. So you'd change that to
setTimeout(() => {slideS(a);}, 1500);
But then when you try to run multiple instances of this concurrently, you'll get into trouble because your'e using global variables. You'll need to use something more local (perhaps closures?) for your lcv, for example.

try this... you are making mistake at some places
var img = document.getElementById("asd");
var imgArr = ["1.jpg", "3.png", "3.png"];
var i = 0;
function slideS(a) {
a.src = imgArr[i];
if (i < imgArr.length - 1) {
i++;
} else {
i = 0;
}
setTimeout(() => slideS(a), 1500);
/* you need to pass function to setTimeout and pass refrence of image that's 'a' */
// or use function instead of arrow function
setTimeout(function() { slides(a) }, 1500);
}
slideS(img)
hope this helps..

You have to use setInterval instead of setTimeout
var img = document.getElementById("asd");
var imgArr = ["https://i.stack.imgur.com/lgt0W.png", "https://i.stack.imgur.com/X0fKm.png", "https://i.stack.imgur.com/YfPSD.png"];
var i = 0;
function slideS(a) {
a.src = imgArr[i];
if (i < imgArr.length - 1) {
i++;
} else {
i = 0;
}
}
slideS(img); //initial call to start it without having to wait for 1500 ms to pass
setInterval(function() {
slideS(img);
}, 1500);
<img id="asd">

How to unsubscribe from all the Youtube channels at once?

I have subscribed to more than 300 Youtube channels in past 10 years, and now I have to clean my Youtube, unsubscribing all one by one will take some time, is there a way to unsubscribe all the cannels at once?

Step 1: Go to https://www.youtube.com/feed/channels and scroll to the bottom of the page to populate all items to the screen.
Step 2: Right-click anywhere on the page and click "Inspect Element" (or just "Inspect"), then click "Console", then copy–paste the below script, then hit return.
Step 3:
var i = 0;
var myVar = setInterval(myTimer, 3000);
function myTimer () {
var els = document.getElementById("grid-container").getElementsByClassName("ytd-expanded-shelf-contents-renderer");
if (i < els.length) {
els[i].querySelector("[aria-label^='Unsubscribe from']").click();
setTimeout(function () {
var unSubBtn = document.getElementById("confirm-button").click();
}, 2000);
setTimeout(function () {
els[i].parentNode.removeChild(els[i]);
}, 2000);
}
i++;
console.log(i + " unsubscribed by YOGIE");
console.log(els.length + " remaining");
}
Step 4: Sit back and watch the magic!
Enjoy!!
NOTE: If the script stops somewhere, please refresh the page and follow all four steps again.

Updating the answer provided by everyone else (as the latest update did not work for me):
var i = 0;
var count = document.querySelectorAll("ytd-channel-renderer:not(.ytd-item-section-renderer)").length;
myTimer();
function myTimer () {
if (count == 0) return;
el = document.querySelector('.ytd-subscribe-button-renderer');
el.click();
setTimeout(function () {
var unSubBtn = document.getElementById("confirm-button").click();
i++;
count--;
console.log(i + " unsubscribed");
console.log(count + " remaining");
setTimeout(function () {
el = document.querySelector("ytd-channel-renderer");
el.parentNode.removeChild(el);
myTimer();
}, 250);
}, 250);
}
For me this did the trick.

Youtube Channel Unsubscriber (Works April-2020)
Access the link : https://www.youtube.com/feed/channels
Press F12
Insert the code below in your console
function youtubeUnsubscriber() {
var count = document.querySelectorAll("ytd-channel-renderer:not(.ytd-item-section-renderer)").length;
var randomDelay = 500;
if(count == 0) return false;
function unsubscribeVisible(randomDelay) {
if (count == 0) {
window.scrollTo(0,document.body.scrollHeight);
setTimeout(function() {
youtubeUnsubscriber();
}, 10000)
}
unsubscribeButton = document.querySelector('.ytd-subscribe-button-renderer');
unsubscribeButton.click();
setTimeout(function () {
document.getElementById("confirm-button").click()
count--;
console.log("Remaining: ", count);
setTimeout(function () {
unsubscribedElement = document.querySelector("ytd-channel-renderer");
unsubscribedElement.parentNode.removeChild(unsubscribedElement);
unsubscribeVisible(randomDelay)
}, randomDelay);
}, randomDelay);
}
unsubscribeVisible(randomDelay);
}
youtubeUnsubscriber();
References
https://github.com/vinnyfs89/youtube-unsubscriber

This is a little addition to the best answer:
You can also use jscompress[dot]com to compress the script, then add javascript: at the beginning of the script, and add it to your bookmarks — you can run it from there — just in case you're not comfortable using console or something like that.

Most effective values:
(copy all above this, including the last)
var i = 0;
var myVar = setInterval(myTimer, 200);
function myTimer () {
var els = document.getElementById("grid-container").getElementsByClassName("ytd-expanded-shelf-contents-renderer");
if (i < els.length) {
els[i].querySelector('[aria-label="Unsubscribe from this channel."]').click();
setTimeout(function () {
var unSubBtn = document.getElementById("confirm-button").click();
}, 500);
setTimeout(function () {
els[i].parentNode.removeChild(els[i]);
}, 1000);
}
i++;
console.log(i + " unsubscribed by YOGIE");
console.log(els.length + " remaining");
}

Updating MordorSlave answer. Just did it a moment ago.
Go to https://www.youtube.com/feed/channels and copy/paste the following in the console:
var i = 0;
var myVar = setInterval(myTimer, 200);
function myTimer() {
var els = document.getElementById("contents").getElementsByClassName("ytd-subscribe-button-renderer");
if (i < els.length) {
els[i].querySelector('.ytd-subscribe-button-renderer').click();
setTimeout(function() {
var unSubBtn = document.getElementById("confirm-button").click();
}, 500);
setTimeout(function() {
els[i].parentNode.removeChild(els[i]);
}, 1000);
}
i++;
console.log(i + " unsubscribed");
console.log(els.length + " remaining");
}

https://gist.github.com/itsazzad/c1d86c5db86258ca129554a7b9ed92a7
Use the DELAY const wisely; consider your net speed.
// Go to the following link in your YouTube: https://www.youtube.com/feed/channels
// Scroll the page all the way down until you reach the very last subscribed channel in your list
const DELAY = 100;
const delay = ms => new Promise(res => setTimeout(res, ms));
const list = document.querySelectorAll("#grid-container > ytd-channel-renderer");
for (const sub of list) {
await delay(DELAY);
sub.querySelector("#subscribe-button > ytd-subscribe-button-renderer > paper-button").click();
await delay(DELAY);
document.querySelector("#confirm-button > a").addEventListener('click', async event => {
await delay(DELAY);
console.log(sub.querySelector("#text").innerText);
await delay(DELAY);
});
await delay(DELAY);
document.querySelector("#confirm-button > a").click()
await delay(DELAY);
}

Go to https://www.youtube.com/feed/channels.
Scroll all the way down till you see the last subscribed channel.
Open the javascript console, paste the following code and hit enter
let btns = document.querySelectorAll('paper-button > yt-formatted-string');
for (let i = 0; i < btns.length; i += 1) {
if (btns[i].innerText.toLowerCase() === 'subscribed') {
btns[i].click();
document.getElementById('confirm-button').click();
}
}
Note: For me this method worked on Firefox. Chrome was giving warnings and the page became unresponsive. Worked on Oct 20th 2020 for an account with 956 subscribed channels.

Hmm, wish I'd googled before rolling out my own. I had some fun with async and await with this. The screen does some ugly flashing while it's trying to unsubscribe stuff, but this does the job pretty well.
One prerequisite for this script to catch all channels in one go is to "exhaust" the scroller in the page ie., keep scrolling until you reach the end of your channel list. As others have stated, head on over to YouTube Channels, open the developer console and paste the script that follows.
I've commented in relevant parts, in case this ends up becoming a learning experience for someone ;)
/**
* Youtube bulk unsubsribe fn.
* Wrapping this in an IIFE for browser compatibility.
*/
(async function iife() {
// This is the time delay after which the "unsubscribe" button is "clicked"; Tweak to your liking!
var UNSUBSCRIBE_DELAY_TIME = 2000
/**
* Delay runner. Wraps `setTimeout` so it can be `await`ed on.
* #param {Function} fn
* #param {number} delay
*/
var runAfterDelay = (fn, delay) => new Promise((resolve, reject) => {
setTimeout(() => {
fn()
resolve()
}, delay)
})
// Get the channel list; this can be considered a row in the page.
var channels = Array.from(document.getElementsByTagName(`ytd-channel-renderer`))
console.log(`${channels.length} channels found.`)
var ctr = 0
for (const channel of channels) {
// Get the subsribe button and trigger a "click"
channel.querySelector(`[aria-label^='Unsubscribe from']`).click()
await runAfterDelay(() => {
// Get the dialog container...
document.getElementsByTagName(`yt-confirm-dialog-renderer`)[0]
// and find the confirm button...
.querySelector(`#confirm-button`)
// and "trigger" the click!
.click()
console.log(`Unsubsribed ${ctr + 1}/${channels.length}`)
ctr++
}, UNSUBSCRIBE_DELAY_TIME)
}
})()

If someone is looking for a working solution, the following script worked for me:
Go to https://www.youtube.com/subscription_manager and run
$$('.yt-uix-button-subscribed-branded').forEach(function(el) { el.click(); $$('.overlay-confirmation-unsubscribe-button').forEach(function(el) { el.click(); }); console.log('Bye YouTube'); });
Ref: https://www.reddit.com/r/youtube/comments/ad3jv5/mass_unsubscribe_script/

My solution, most up to date i think, but things always changing...
var unsubBtns = document.querySelectorAll(' div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > ytd-subscribe-button-renderer:nth-child(1) > paper-button:nth-child(1)');
var i = 0;
var interV = setInterval(function(){
unsubBtns[i].click();
i++;
document.querySelector('yt-formatted-string.style-blue-text').click()
}, 1000);

Extending on Jani's answer, this one has a DOM progress counter. Absolutely no jQuery.
(function() {
var i = 0;
var ytdElem = document.querySelector("ytd-page-manager ytd-browse.ytd-page-manager");
ytdElem.innerHTML = '<div style="font: 11pt arial; background: yellow; color: white" id="ytdjsds"></div>' + ytdElem.innerHTML;
var element = document.getElementById("ytdjsds");
var count = document.querySelectorAll("ytd-channel-renderer:not(.ytd-item-section-renderer)").length;
if (count == 0) {
element.innerHTML = "No subscriptions were found on your account.";
return;
}
element.innerHTML = `Deleting subscription 1 of ${count}`;
function myTimer() {
if (count == 0) {
element.innerHTML = `Successfully deleted subscriptions`;
return;
}
element.innerHTML = `Deleting subscription ${i + 1} of ${count}`;
el = document.querySelector('.ytd-subscribe-button-renderer');
el.click();
document.getElementById("confirm-button").style.display = "none";
setTimeout(function() {
var unSubBtn = document.getElementById("confirm-button").click();
i++;
setTimeout(function() {
el = document.querySelector("ytd-channel-renderer");
el.parentNode.removeChild(el);
myTimer();
}, 250);
}, 250);
}
myTimer();
})();

as of October 2021
from this page https://www.youtube.com/feed/channels
var list = $$('yt-formatted-string.ytd-subscribe-button-renderer')
function foo($$) {
if (list.length === 0) return
var el = list.pop()
el.click()
setTimeout(_=>{
var cancel = $$('yt-formatted-string.yt-button-renderer')[1]
cancel.click()
console.log('done')
setTimeout(_=>{foo($$)},100)
}, 100)
}
foo($$)

execute function in created and inserted DOM element

My intention is very simple: I have a newSpan() function, that creates a new span and inserts it before the first child of the main element (or appends it if main is empty), and a letterTyper() function, that fills the inserted element with the string stored in a CONTENT constant while generating a sort of backwards typing effect. The idea is to create a new element and then triggering the effect inside it a given number of times with a loop in window.onload.
But when I fill the window.onload anonymous function with
window.onload = function() {
newSpan();
letterTyper();
newSpan();
letterTyper();
}
What I end up with in the DOM is
<main>
<span id="#span1">lorem ipsum</span>
<span id="#span0"></span>
</main>
I also tried to use a DOMContentLoaded event, to no effect. Why is that? What am I doing wrong?
My code:
const CONTENT = 'lorem ipsum';
var main = document.querySelector('main');
var spanId = 0;
var charCount = CONTENT.length;
window.onload = function() {
newSpan();
letterTyper();
newSpan();
letterTyper();
}
function newSpan() {
var newSpan = document.createElement('span');
var isEmpty = main.innerHTML === '';
newSpan.setAttribute('id', '#span' + spanId);
if (isEmpty) {
main.appendChild(newSpan);
} else {
main.insertBefore(newSpan, document.getElementById('#span' + (spanId - 1)));
}
spanId++;
}
function letterTyper() {
var targetSpan = main.firstChild;
targetSpan.textContent = CONTENT.substring(charCount, charCount + 1) + targetSpan.textContent.substring(0, targetSpan.textContent.length);
charCount--;
if ( charCount < 0) {
clearTimeout(timer);
charCount = CONTENT.length;
} else {
timer = setTimeout('letterTyper()', 100);
}
}

setTimeout is asynchronous. When you call letterTyper for the first time, it will return to your window.onload and trigger the next newSpan() and letterTyper().
That means that the letterTyper loop of the first span interferes with the second loop, because the first loop hasn't finished when the second one is started. In other words, the second loop is never created, but all calls of letterTyper will see the #span1 element (the second span element) as the first child of main.
You have to wait until the first loop is finished before you start the second loop. I suggest you take a look at Promises.
I changed a few things in your code so that is now uses promises:
const CONTENT = 'lorem ipsum';
var main = document.querySelector('main');
var spanId = 0;
var charCount = CONTENT.length;
window.onload = function() {
// start the first loop
letterTyper(newSpan()).then(function () {
// the first loop has finished, start the second loop
return letterTyper(newSpan());
}).then(function () {
// the second loop has finished, start the third loop
return letterTyper(newSpan());
});
}
function newSpan() {
var newSpan = document.createElement('span');
var isEmpty = main.children.length === 0;
newSpan.setAttribute('id', '#span' + spanId);
if (isEmpty) {
main.appendChild(newSpan);
} else {
main.insertBefore(newSpan, document.getElementById('#span' + (spanId - 1)));
}
spanId++;
charCount = CONTENT.length; // reset the character count
return newSpan;
}
function letterTyper(span) {
return new Promise(function (resolve, reject) {
// executes one tick (adds one character and calls itself after 100ms)
var tick = function () {
// prepend a new character
span.textContent = CONTENT[charCount -= 1] + span.textContent;
if (charCount > 0) {
// call tick again in 100ms
setTimeout(tick, 100);
} else {
// loop is finished, the "then" part will be called
resolve();
}
};
// start the loop
setTimeout(tick, 100);
});
}
<main></main>

Change img src every second using Jquery and Javascript

I have been trying to write a script that changes an image src every two seconds based on a list.
So, everything is inside a forloop that loops over that list:
$(document).ready(function() {
var lis = {{dias|safe}}; <----- a long list from django. This part of the code works fine.
for (i=0; i<lis.length; i++){
src_img = lis[i][1];
var timeout = setInterval(function(){
console.log(src_img)
$("#imagen").attr("src", src_img);
}, 2000)
}
});
It doesn't work, the console logs thousands of srcs that correspond to the last item on the list. Thanks a lot for your help.

you don't need to run cycle in this case, you just save "pointer" - curentImage and call next array item through function ever 2 sec
var curentImage = 0;
function getNextImg(){
var url = lis[curentImage];
if(lis[curentImage]){
curentImage++;
} else {
curentImage = 0;
}
return url;
}
var timeout = setInterval(function(){
$("#imagen").attr("src", getNextImg());
}, 2000)

var curentImage = 0;
var length = lis.length;
function NewImage(){
var url = lis[curentImage];
if(curentImage < length){
currentImage++;
}
else{
currentImage = 0;
}
return url;
}
var timeout = setInterval(function(){
$("#imagen").attr("src", getNextImg());
}, 2000)
PS: Better than the previous one, Checks for lis length and starts from first if you reach end.

You need something like this
$(document).ready(function() {
var index = 0;
setInterval(function(){
src_img = lis[index++ % lis.lenght][1]; // avoid arrayOutOfBounds
$("#imagen").attr("src", src_img);
}, 2000)
});

Develop Reference

JavaScript is the programming language of the Web.

Make the `for` loop wait for each function to resolve - javascript

Related

How pause a loop in JavaScript?

How can I reuse a function properly?

How to unsubscribe from all the Youtube channels at once?

execute function in created and inserted DOM element

Change img src every second using Jquery and Javascript

Categories

Resources