The API documentation does not contain an obvious way to trigger a javascript event when a YouTube video reaches a certain time stamp. Do you know any workaround?
You can create a timer which check at second whether video has reached certain timestamp.
To restrict unnecessary function calls, start time only when it reaches your set time
var timeout = setTimeout(function(){
var interval = setInterval(function(){
if(player.getCurrentTime() === <you_set_time>){
clearInterval(interval);
// Your logic
}
},1000);
},<your_set_time_in_millisecs>);
To avoid unnecessary processing, you can wait for player to enter PLAYING state, then, put a setTimeout function with the remaining time until time stamp.
In case of buffering, anytime the player resumes PLAYING states, call the same function, which clears the previous setTimeout and sets the new one (if remaining time positive)
Here is the jsfiddle POC : http://jsfiddle.net/V6rgy/
Related
How to give Fixed(Implicit Wait) wait in playwright
With out any condition
Like we had in cypress :
Cy.wait(600);
Thank You
Like we had in cypress :
Cy.wait(600);
To give a fixed wait in Playwright without using any conditions, you can use the page.waitForTimeout method. This method will pause the script for a specified amount of time before continuing.
await page.waitForTimeout(2000); // waits for 2 seconds
You can also use the page.waitForFunction method with a function that returns true after a certain amount of time. For example:
await page.waitForFunction(() => {
const now = Date.now();
return now - start > 2000;
});
This will wait for 2 seconds before returning true.
Note that these methods should be used sparingly as they can cause delays in the script execution. It is generally better to use specific conditions to determine when to continue, such as waiting for a specific element to be present or for a page to load.
This is 5 sec timeout
await new Promise(resolve => setTimeout(resolve, 5000));
Avoid using hard waits with playwright!
Issue with Hard waits:
Hard waits do only one thing , they simply wait for specified time without considering any application actual response time which is very rigid approach.
See the below example:
await page.waitFor(5000); // hard wait for 5000ms
This will wait for 5 seconds regardless of actual response time which may be less or more than 5 seconds which is bad in both cases as in first case it has to wait unnecessary for longer time where object is already loaded and in second scenario it will fail after waiting unnecessary for 5 seconds if object is not going to load at all in failing scenario.
Recommended Approach
In-built waits
Playwright has in-built waiting mechanism on navigation and page interactions. As they are part of playwright itself , it is better to use them and customize it if required.
Explicit waits
There is another way to handle waits explicitly only in scenarios where auto-waiting is not a sufficient or efficient approach to handle depending on specific scenarios but in general it should be avoided if auto-waiting is enough for the requirement.
Waiting for page navigations and API responses
1)page.waitForNavigation to wait until a page navigation (new URL or page reload) has completed.
2)page.waitForLoadState This waits until the required load state has been achieved.
3)page.waitForURL This waits until a navigation to the target URL.
4)page.waitForResponse waits till the response from the given API is received.
Wait for element
In lazy-loaded pages, it can be useful to wait until an element is visible with locator.waitFor(). Alternatively, page interactions like page.click() auto-wait for elements.
// Navigate and wait for element
await page.goto('https://example.com');
await page.getByText('Example Domain').waitFor();
// Navigate and click element
// Click will auto-wait for the element
await page.goto('https://example.com');
await page.getByText('Example Domain').click();
Waiting on page events
We can also directly wait on page events using page.waitForEvent.
Customized Wait Function
At last we can also write (if really needed) customized wait functions using WaitForFunction for very specific scenarios or specific applications or controls.
in my Nuxt app I have a Canvas that listens for mouse events. Now I want to send those mouse events to the DOM, everything is working fine. But I'm concerned that there are too many events for Vue, because there is like thousands of them. When I switch to the Vue dev tools, my Computer already begins to stutter. I feel like Vue is only made for simple click events, but I'm using it for a ton. Is there a better way to handle that?
init(){
document.addEventListener("mousemove", this.mouseMove.bind(this));
}
mouseMove(e){
EventBus.$emit("MOUSEMOVE", e);
}
It's okay if you need to add certain event listeners here and there. Just make sure you remove them when to component is destroyed, e.g.
mounted() {
window.addEventListener('eventName', yourMethod);
},
beforeDestroy() {
window.removeEventListener('eventName', yourMethod);
}
How about using debouncer for a short time limit.
I'm guessing that your DOM is not updating on every event and it takes some to self update. So slow down the event bus emit like in every 50/100 ms there will be an event fire. You can emit to event bus on every 50 MiliSecond or as per as your need. That would be helpful even if you solve the problem in other way.
When I watch $store.stateA, the watch callback function for the following seems to not trigger.
stateA: false
muationA(state,val){
state.stateA = val
}
actionA({commit},val) {
commit('mutationA', true)
commit('mutationB', false) //take this out would trigger the watch callback
}
So what is the case here? the entire action callback need to finish before the watch functions are triggered?
As Nit mentioned, both mutations cancel each other since they are done synchronously. Read the "Reactivity in Depth" section of the doc for more info. In particular (emphasis mine):
In case you haven’t noticed yet, Vue performs DOM updates asynchronously. Whenever a data change is observed, it will open a queue and buffer all the data changes that happen in the same event loop. If the same watcher is triggered multiple times, it will be pushed into the queue only once. This buffered de-duplication is important in avoiding unnecessary calculations and DOM manipulations. Then, in the next event loop “tick”, Vue flushes the queue and performs the actual (already de-duped) work.
Other watcher solutions do work differently and are triggered right away when the value changes (e.g. Backbone.js). Vue does not work that way.
I wanted once to use a vuex variable as an event transmitter across components and needed to set a boolean variable to false and immediately to true afterward. I however saw that the watch in the component did not pick it up. The issue as mentioned in the other post is that they cancel each other because they are in the same event loop.
In order to make that work, I just had to separate their event loop by waiting for the Vue.nextTick() as follows:
// First operation
await Vue.nextTick();
// Second operation
In order to optimize createjs code, I cannot find info on this matter.
Case:
I have a scrollbar component, and each time I move the scrollbar stage is updated to reflect changes in scrollbar visual. Also a scroll event is triggered.
Application listens to the event, and updates some visual in scrolled content, therefore another Stage.update() is triggered.
My question is: does stage get updated only at each "tick", or the above situation will cause stage to update twice in the same instant degrading performance?
In code, will:
stage.update();
stage.update();
stage.update();
Cause stage to update 3 times in a row? Or only once at next tick?
Thank you
There is no debouncing on the stage update, so each time you call it, the stage will be rendered. Additionally, internal counters like tick-based frame advances will be fired.
It is not advisable to run it more times than you need to. Usually apps either have a continuous Ticker, or are updated only when content changes.
If you want to create a hybrid, I recommend checking an update property that you set yourself. Then you can toggle it any time, and it will run once per tick max.
createjs.Ticker.on("tick", function(e) {
if (shouldUpdate) { stage.update(e); }
shouldUpdate = false;
});
Hope that helps!
I am reading the vue official doc on Async Update Queue, and got confused on:
Whenever a data change is observed, it will open a queue and buffer
all the data changes that happen in the same event loop
what does it mean by the same event loop, are there gonna be multiple event loops at the same time? It also says the queue will be flushed in the next event loop “tick”, what does tick mean here? what if there is no next event loop or the next event loop never tick?
Let me try answering this question as par my understanding.
what does it mean by the same event loop, are there gonna be multiple event loops at the same time?
Instead of applying each and every change in any vue property/method/variable to the view, vue saves all those changes in queue and flush those changes later. In this process of pushing the changes in the queue, it optimises by not re-rendering on each change as is commented here:
/**
* Push a watcher into the watcher queue.
* Jobs with duplicate IDs will be skipped unless it's
* pushed when the queue is being flushed.
*/
export function queueWatcher (watcher: Watcher) {
...
...
the queue will be flushed in the next event loop “tick”, what does tick mean here?
Internally Vue tries native Promise.then and MutationObserver for the asynchronous queuing and falls back to setTimeout(fn, 0). Here you can see first preference for this is given to native Promise.then after that MutationObserver where native Promise is not available and in worst case fallback to setTimeout.